Fix #2 pagination now works with filtering

Author: alex-c

src/datagrid.tsx

@@ -48,18 +48,17 @@ const parseChildren = <T,>(children: JSX.Element | JSX.Element[]): DatagridDeriv
 export const Datagrid = <T extends DataSourceType>(props: DatagridProps<T>) => {
   const { columns, actions, pagination, placeholder } = parseChildren<T>(props.children);
 
+  const { getCellClassName, renderCell } = useRendering<T>();
+  const { filterData, renderFilterControls } = useFiltering<T>(columns);
+  const { sortData, renderSortingControl } = useSorting<T>(columns);
   const { paginateData, renderPaginationControls } = usePagination<T>(
-    props.dataSource.length,
     pagination?.elementsPerPage,
     pagination?.directInput || false
   );
-  const { sortData, renderSortingControl } = useSorting<T>(columns);
-  const { filterData, renderFilterControls } = useFiltering<T>(columns);
-  const { getCellClassName, renderCell } = useRendering<T>();
 
-  let data = filterData(props.dataSource);
-  data = sortData(data);
-  data = paginateData(data);
+  const filteredData = filterData(props.dataSource);
+  const sortedData = sortData(filteredData);
+  const paginatedData = paginateData(sortedData);
 
   return (
     <div className="datagrid-wrapper">
@@ -77,9 +76,9 @@ export const Datagrid = <T extends DataSourceType>(props: DatagridProps<T>) => {
           {columns.filter(c => c.filter).length > 0 && <tr>{columns.map(renderFilterControls)}</tr>}
         </thead>
         <tbody>
-          {data.length > 0 ? (
+          {paginatedData.length > 0 ? (
             <>
-              {data.map((row, i) => (
+              {paginatedData.map((row, i) => (
                 <tr key={"row-" + i}>
                   {columns.map(col => (
                     <td key={col.field} className={getCellClassName(col)}>
@@ -110,7 +109,7 @@ export const Datagrid = <T extends DataSourceType>(props: DatagridProps<T>) => {
                 </tr>
               ))}
               {pagination &&
-                [...Array(pagination.elementsPerPage - data.length)].map((_, i) => (
+                [...Array(pagination.elementsPerPage - paginatedData.length)].map((_, i) => (
                   <tr key={"row-fill-" + i}>
                     {[...Array(columns.length + (actions.length > 0 ? 1 : 0))].map((_, j) => (
                       <td key={"cell-fill-" + j}>
@@ -132,7 +131,7 @@ export const Datagrid = <T extends DataSourceType>(props: DatagridProps<T>) => {
           )}
         </tbody>
       </HTMLTable>
-      {pagination && <div className="datagrid-bottombar">{renderPaginationControls()}</div>}
+      {pagination && <div className="datagrid-bottombar">{renderPaginationControls(filteredData.length)}</div>}
     </div>
   );
 };

src/use-pagination.tsx

@@ -10,21 +10,16 @@ const calculateNumberOfPages = (numberOfElements: number, elementsPerPage: numbe
   return ratio > floored ? floored + 1 : floored === 0 ? 1 : floored;
 };
 
-export const usePagination = <T extends DataSourceType>(
-  numberOfElements: number,
-  elementsPerPage: number | undefined,
-  directInput: boolean
-) => {
+export const usePagination = <T extends DataSourceType>(elementsPerPage: number | undefined, directInput: boolean) => {
   const [activePage, setActivePage] = useState<number>(1);
-  const numberOfPages = elementsPerPage !== undefined ? calculateNumberOfPages(numberOfElements, elementsPerPage) : 1;
 
-  const directInputPage = (page: number) => {
-    if (page >= 1 && page <= numberOfPages) {
-      setActivePage(page);
+  const renderPaginationControls = (numberOfElements: number) => {
+    const numberOfPages = elementsPerPage !== undefined ? calculateNumberOfPages(numberOfElements, elementsPerPage) : 1;
+
+    if (activePage > numberOfPages) {
+      setActivePage(1);
     }
-  };
 
-  const renderPaginationControls = () => {
     return (
       <ButtonGroup>
         <Button icon={IconNames.DoubleChevronLeft} disabled={activePage === 1} onClick={() => setActivePage(1)} />
@@ -39,7 +34,11 @@ export const usePagination = <T extends DataSourceType>(
               min={1}
               max={numberOfPages}
               value={activePage}
-              onValueChange={directInputPage}
+              onValueChange={(page: number) => {
+                if (page >= 1 && page <= numberOfPages) {
+                  setActivePage(page);
+                }
+              }}
               style={{ width: numberOfPages.toString().length * 18 + 32 + "px", textAlign: "right" }}
               buttonPosition="none"
               selectAllOnFocus
@@ -60,7 +59,7 @@ export const usePagination = <T extends DataSourceType>(
                 <Button text={activePage - 1} onClick={() => setActivePage(activePage - 1)} />
               </>
             ) : (
-              [...Array(activePage - 1)].map((_, i) => (
+              [...Array(activePage - 1 >= 0 ? activePage - 1 : 0)].map((_, i) => (
                 <Button key={"button-" + i} text={i + 1} onClick={() => setActivePage(i + 1)} />
               ))
             )}
@@ -72,7 +71,7 @@ export const usePagination = <T extends DataSourceType>(
                 <Button text={".."} disabled />
               </>
             ) : (
-              [...Array(numberOfPages - activePage)].map((_, i) => {
+              [...Array(numberOfPages - activePage >= 0 ? numberOfPages - activePage : 0)].map((_, i) => {
                 const index = i + activePage + 1;
                 return <Button key={"button-" + index} text={index} onClick={() => setActivePage(index)} />;
               })