From 2b8f627fbebcaa2e30e561b25dbfe65877398cf0 Mon Sep 17 00:00:00 2001
From: Becky Smith <becky.smith@thedatalab.org>
Date: Wed, 17 Jul 2024 16:19:07 +0100
Subject: [PATCH] Allow custom pagination perpage for datatables

---
 assets/src/scripts/_datatable.js       | 2 +-
 templates/_components/index.html       | 3 ++-
 templates/_components/table/table.html | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/assets/src/scripts/_datatable.js b/assets/src/scripts/_datatable.js
index 481169d83..2b474ab50 100644
--- a/assets/src/scripts/_datatable.js
+++ b/assets/src/scripts/_datatable.js
@@ -75,7 +75,7 @@ const initCustomTable = async () => {
 
     const dataTable = new DataTable(tableEl, {
       paging: true,
-      perPage: 25,
+      perPage: tableEl.dataset.perpage ? tableEl.dataset.perpage : 25,
       searchable: true,
       sortable: true,
       tableRender: (_data, table) => {
diff --git a/templates/_components/index.html b/templates/_components/index.html
index 50c96c2fa..d03e6b859 100644
--- a/templates/_components/index.html
+++ b/templates/_components/index.html
@@ -691,7 +691,7 @@ <h3>List group rich item</h3>
       <h2>Modal</h2>
       <ul>
         <li><code>button_text</code>: [string] - the text to display on the button to open the dialog</li>
-        <li><code>button_variant</code>: [string] - the butten variant (default: primary)</li>
+        <li><code>button_variant</code>: [string] - the button variant (default: primary)</li>
         <li><code>children</code>: [html] - display the children components. You could include one button with <code>type="cancel"</code>, which will close the modal window.</li>
         <li><code>custom_button</code>: [string] - add a fragment for a custom button. This button should have the attribute <code>data-modal=id`</code> in order to trigger opening the dialog modal.</li>
         <li><code>id</code>: [string] - HTML element ID for dialog element</li>
@@ -951,6 +951,7 @@ <h3>Table</h3>
       <ul>
         <li><code>children</code>: [html] - display the children components</li>
         <li><code>id</code>: [string] - add HTML ID to element</li>
+        <li><code>data-perpage</code>: [number] - Number of items per page (default: 25)</li>
       </ul>
 
       <h3>Table Body</h3>
diff --git a/templates/_components/table/table.html b/templates/_components/table/table.html
index a351bfa8e..e4c8cd30f 100644
--- a/templates/_components/table/table.html
+++ b/templates/_components/table/table.html
@@ -1,3 +1,3 @@
-<table class="min-w-full divide-y divide-slate-300" {% attrs id %}>
+<table class="min-w-full divide-y divide-slate-300" {% attrs id data-perpage %}>
   {{ children }}
 </table>