From abc61380ce69d3682f2f97ed19df3b95a98226e1 Mon Sep 17 00:00:00 2001
From: Robin Meischke <r.meischke@taifun-tofu.de>
Date: Mon, 22 Aug 2022 15:42:42 +0200
Subject: [PATCH 1/2] fix: result count not adapting to filters

closes #73
---
 package.json       |  2 +-
 src/DataGrid.tsx   |  1 -
 src/Pagination.tsx | 12 +++++-------
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index b8086dc..788f260 100644
--- 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
index 223ef45..85e5634 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -293,7 +293,6 @@ export function DataGrid<TData extends RowData>({
 
       {withPagination && (
         <Pagination
-          totalRows={data.length}
           table={table}
           pageSizes={pageSizes}
           fontSize={fontSize}
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index 517f1b7..b32a04f 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -8,14 +8,12 @@ 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
 }: {
   table: Table<TData>;
   classes: string[];
-  totalRows: number;
   pageSizes?: string[];
   fontSize?: MantineNumberSize;
   color: string;
@@ -23,10 +21,10 @@ export function Pagination<TData>({
   const pageIndex = table.getState().pagination.pageIndex;
   const pageSize = table.getState().pagination.pageSize;
 
-  const firstRowNum = pageIndex * pageSize + 1;
-
-  const currLastRowNum = (pageIndex + 1) * pageSize;
-  const lastRowNum = currLastRowNum < totalRows ? currLastRowNum : totalRows;
+  const maxRows = 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 handlePageSizeChange = (value: string) => {
     table.setPageSize(Number(value));
@@ -39,7 +37,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>

From fc033e8bb91f67c04247a91a39426d9695e1cfca Mon Sep 17 00:00:00 2001
From: Robin Meischke <r.meischke@taifun-tofu.de>
Date: Mon, 22 Aug 2022 15:57:18 +0200
Subject: [PATCH 2/2] fix: async pagination not showing correct total

closes #75
---
 src/DataGrid.tsx   | 1 +
 src/Pagination.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 85e5634..951116b 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -294,6 +294,7 @@ export function DataGrid<TData extends RowData>({
       {withPagination && (
         <Pagination
           table={table}
+          total={total}
           pageSizes={pageSizes}
           fontSize={fontSize}
           color={color}
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index b32a04f..2410862 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -11,21 +11,25 @@ export function Pagination<TData>({
   fontSize = 'md',
   pageSizes = DEFAULT_PAGE_SIZES,
   color = '', // Empty color will follow the primary button color
+  total,
 }: {
   table: Table<TData>;
   classes: string[];
   pageSizes?: string[];
   fontSize?: MantineNumberSize;
   color: string;
+  total?: number;
 }) {
   const pageIndex = table.getState().pagination.pageIndex;
   const pageSize = table.getState().pagination.pageSize;
 
-  const maxRows = table.getPrePaginationRowModel().rows.length;
+  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;
 
+  console.log({ total, maxRows, currentRowAmount, firstRowNum, lastRowNum });
+
   const handlePageSizeChange = (value: string) => {
     table.setPageSize(Number(value));
   };