Merge pull request #4464 from opensafely-core/custom-perpage-datatable

Allow custom pagination perpage for datatables

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) => {

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>

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>