Merge pull request #459 from sudhanshutech/standard/pagination

Standard Pagination for Tables

Author: leecalcote

src/custom/ResponsiveDataTable.tsx

@@ -23,6 +23,7 @@ export interface ResponsiveDataTableProps {
   columnVisibility: Record<string, boolean> | undefined;
   theme?: object;
   colViews?: Record<string, boolean> | undefined;
+  rowsPerPageOptions?: number[] | undefined;
 }
 
 const ResponsiveDataTable = ({
@@ -32,6 +33,7 @@ const ResponsiveDataTable = ({
   tableCols,
   updateCols,
   columnVisibility,
+  rowsPerPageOptions = [20, 50, 100], // Default and standard page size options
   ...props
 }: ResponsiveDataTableProps): JSX.Element => {
   const formatDate = (date: Date): string => {
@@ -47,6 +49,7 @@ const ResponsiveDataTable = ({
 
   const updatedOptions = {
     ...options,
+    rowsPerPageOptions: rowsPerPageOptions,
     onViewColumnsChange: (column: string, action: string) => {
       switch (action) {
         case 'add': {

src/custom/readme.md

@@ -33,6 +33,13 @@ This custom React component, `ResponsiveDataTable`, is a wrapper around the Mate
 | `theme`            | `object`                               | (Optional) Theme object for styling the table.                                                              |
 | `colViews`         | `Record<string, boolean> \| undefined` | (Optional) Object representing the visibility status of each column. This is similar to `columnVisibility`. |
 
+### Standard Props
+
+| Property | Type     | Description                                                                                                 |
+| -------- | -------- | ----------------------------------------------------------------------------------------------------------- |
+| `rowsPerPageOptions`  | `number[]` | (Optional) Array of numbers representing the number of rows per page. If not provided, the default values will be used(20, 50, 100). |
+
+
 ### Customization
 
 ### Column Visibility