Merge pull request Kuechlin#78 from Kuechlin/v0.0.15

Fix Pagination not updating results counts
Shadowfita · Aug 23, 2022 · 3793eb4 · 3793eb4
2 parents d7fe1ee + fc033e8
commit 3793eb4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-data-grid",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "homepage": "https://kuechlin.github.io/mantine-data-grid/",
   "repository": {
     "type": "git",

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -293,8 +293,8 @@ export function DataGrid<TData extends RowData>({
 
       {withPagination && (
         <Pagination
-          totalRows={data.length}
           table={table}
+          total={total}
           pageSizes={pageSizes}
           fontSize={fontSize}
           color={color}

diff --git a/src/Pagination.tsx b/src/Pagination.tsx
@@ -8,25 +8,27 @@ export const DEFAULT_INITIAL_SIZE = 10;
 export function Pagination<TData>({
   table,
   classes,
-  totalRows,
   fontSize = 'md',
   pageSizes = DEFAULT_PAGE_SIZES,
   color = '', // Empty color will follow the primary button color
+  total,
 }: {
   table: Table<TData>;
   classes: string[];
-  totalRows: number;
   pageSizes?: string[];
   fontSize?: MantineNumberSize;
   color: string;
+  total?: number;
 }) {
   const pageIndex = table.getState().pagination.pageIndex;
   const pageSize = table.getState().pagination.pageSize;
 
-  const firstRowNum = pageIndex * pageSize + 1;
+  const maxRows = total ? total : table.getPrePaginationRowModel().rows.length;
+  const currentRowAmount = table.getRowModel().rows.length;
+  const firstRowNum = maxRows === 0 ? 0 : pageIndex * pageSize + 1;
+  const lastRowNum = maxRows === 0 ? 0 : firstRowNum + currentRowAmount - 1;
 
-  const currLastRowNum = (pageIndex + 1) * pageSize;
-  const lastRowNum = currLastRowNum < totalRows ? currLastRowNum : totalRows;
+  console.log({ total, maxRows, currentRowAmount, firstRowNum, lastRowNum });
 
   const handlePageSizeChange = (value: string) => {
     table.setPageSize(Number(value));
@@ -39,7 +41,7 @@ export function Pagination<TData>({
   return (
     <Box className={classes[0]}>
       <Text size={fontSize} className={classes[1]}>
-        Showing <b>{firstRowNum}</b> - <b>{lastRowNum}</b> of <b>{totalRows}</b> result
+        Showing <b>{firstRowNum}</b> - <b>{lastRowNum}</b> of <b>{maxRows}</b> result{maxRows === 1 ? '' : 's'}
       </Text>
 
       <Group>