@arbor-education/design-system.components 0.1.1 → 0.1.2

package/src/components/table/Table.stories.tsx

@@ -5,7 +5,13 @@ import { Button } from 'Components/button/Button';
 import { Icon } from 'Components/icon/Icon';
 import { BulkActionsDropdown } from './BulkActionsDropdown';
 
-const meta: Meta<typeof Table> = {
+import { useState, type ComponentProps } from 'react';
+import { RowCountInfo } from './pagination/RowCountInfo';
+import { PaginationPanel } from './pagination/PaginationPanel';
+
+type TableProps = ComponentProps<typeof Table>;
+
+const meta: Meta<TableProps> = {
   title: 'Components/Table',
   component: Table,
 };
@@ -46,7 +52,7 @@ const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
 
 const FooterContent = [
   <Button key={0} variant="primary">Button 1</Button>,
-  <span key={1}>Pagination placeholder</span>,
+  <RowCountInfo key={3} />,
   <Button key={2} variant="secondary">Button 2</Button>,
 ];
 
@@ -85,6 +91,7 @@ export const WithFooter: Story = {
     defaultColDef: defaultColDef,
     domLayout: 'autoHeight',
     footerContent: FooterContent,
+    pagination: true,
   },
 };
 
@@ -135,4 +142,59 @@ export const WithBulkActions: Story = {
   },
 };
 
+export const WithClientSidePagination: StoryObj<TableProps> = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+    pagination: true,
+    footerContent: <PaginationPanel availableSizes={[1, 2, 3, 4, 'All']} initialPageSize={2} />,
+  },
+};
+
+export const WithServerSidePagination: StoryObj<TableProps> = {
+  args: {
+    rowData: sampleData,
+    columnDefs: sampleColumnDefs,
+    defaultColDef: defaultColDef,
+    domLayout: 'autoHeight',
+    pagination: false,
+  },
+  render: () => {
+    const availableSizes = [1, 2, 3, 4, 'All'];
+    const initialPageSize = availableSizes[1] as number;
+    const [currentPage, setCurrentPage] = useState(0);
+    const [currentPageSize, setCurrentPageSize] = useState(initialPageSize);
+
+    const splitRowDataBasedOnPageSize = (arr: RowData[]): RowData[][] =>
+      arr.length > currentPageSize
+        ? [arr.slice(0, currentPageSize), ...splitRowDataBasedOnPageSize(arr.slice(currentPageSize))]
+        : [arr];
+
+    const pageData = splitRowDataBasedOnPageSize(sampleData);
+
+    const data = pageData[currentPage];
+
+    return (
+      <Table
+        rowData={data}
+        columnDefs={sampleColumnDefs}
+        defaultColDef={defaultColDef}
+        domLayout="autoHeight"
+        footerContent={(
+          <PaginationPanel
+            totalRows={5}
+            totalPages={pageData.length}
+            onPageChange={page => setCurrentPage(page)}
+            availableSizes={[1, 2, 3, 4, 'All']}
+            initialPageSize={currentPageSize}
+            onPageSizeChange={size => setCurrentPageSize(size as number)}
+          />
+        )}
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/table/Table.test.tsx

@@ -94,7 +94,9 @@ describe('Table', () => {
       expect(screen.getByText('Page 1 of 10')).toBeInTheDocument();
       expect(screen.getByText('Next')).toBeInTheDocument();
     });
+  });
 
+  describe('BulkActionsDropdown', () => {
     test('renders all bulk actions in dropdown', async () => {
       render(
         <Table

package/src/components/table/Table.tsx

@@ -2,10 +2,14 @@ import { AllEnterpriseModule, ModuleRegistry, type GridApi } from 'ag-grid-enter
 import { AgGridReact, type AgGridReactProps } from 'ag-grid-react';
 import { tableTheme } from './tableTheme';
 import classNames from 'classnames';
-import { useRef, type ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import { TableFooter } from './TableFooter';
 import { TableHeader } from './TableHeader';
 import { GridApiContext } from './GridApiContext';
+import { PaginationPanel } from './pagination/PaginationPanel';
+import { PageSizeSelector } from './pagination/PageSizeSelector';
+import { PaginationControls } from './pagination/PaginationControls';
+import { RowCountInfo } from './pagination/RowCountInfo';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -31,10 +35,10 @@ export const Table = (props: TableProps) => {
     ...rest
   } = props;
 
-  const gridApiRef = useRef<GridApi>(null);
+  const [gridApi, setGridApi] = useState<GridApi | null>(null);
 
   return (
-    <GridApiContext.Provider value={gridApiRef}>
+    <GridApiContext.Provider value={gridApi}>
       <section data-testid={testId} className={classNames('ds-table__container', wrapperClassName)}>
         {headerContent && (
           <TableHeader data-testid={headerTestId}>
@@ -45,9 +49,10 @@ export const Table = (props: TableProps) => {
           theme={tableTheme}
           onGridReady={(event) => {
             const { api } = event;
-            gridApiRef.current = api;
+            setGridApi(api);
             onGridReady?.(event);
           }}
+          suppressPaginationPanel
           {...rest}
         />
         {footerContent && (
@@ -59,3 +64,8 @@ export const Table = (props: TableProps) => {
     </GridApiContext.Provider>
   );
 };
+
+Table.PaginationPanel = PaginationPanel;
+Table.PageSizeSelector = PageSizeSelector;
+Table.PaginationControls = PaginationControls;
+Table.RowCountInfo = RowCountInfo;

package/src/components/table/pagination/PageSizeSelector.tsx

@@ -0,0 +1,73 @@
+import { Button } from 'Components/button/Button';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import { useEffect, useState } from 'react';
+import { useGridApi } from 'Utils/hooks/useGridApi';
+
+const DEFAULT_PAGE_SIZES = [
+  10,
+  20,
+  30,
+  50,
+  100,
+  200,
+  300,
+  500,
+  1000,
+  'All',
+] as const;
+
+export type PageSizeSelectorProps = {
+  availableSizes?: (number | 'All')[];
+  initialPageSize?: number | 'All';
+  onPageSizeChange?: (newPageSize: number | 'All') => void;
+};
+
+export const PageSizeSelector = (props: PageSizeSelectorProps) => {
+  const {
+    availableSizes = DEFAULT_PAGE_SIZES,
+    initialPageSize,
+    onPageSizeChange: passedOnPageSizeChange,
+  } = props;
+
+  const { gridApi, isGridApiReady } = useGridApi();
+
+  const [selectedPageSize, setSelectedPageSize] = useState(initialPageSize || '100');
+
+  const updatePageSize = (newPageSize: string | number) => {
+    const normalizedValue = !isNaN(Number(newPageSize)) ? Number(newPageSize) : 'All';
+    setSelectedPageSize(normalizedValue);
+    if (passedOnPageSizeChange) {
+      passedOnPageSizeChange(normalizedValue);
+      return;
+    }
+    if (typeof normalizedValue === 'number') {
+      gridApi?.setGridOption('pagination', true);
+      gridApi?.setGridOption('paginationPageSize', normalizedValue);
+    }
+    else {
+      gridApi?.setGridOption('pagination', false);
+    }
+  };
+
+  useEffect(() => {
+    if (isGridApiReady && initialPageSize) {
+      updatePageSize(initialPageSize);
+    }
+  }, [isGridApiReady]);
+
+  return (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <Button variant="dropdown" iconRightName="chevron-down" aria-label="Select page size">
+          {selectedPageSize}
+        </Button>
+      </Dropdown.Trigger>
+      <Dropdown.Content>
+        {availableSizes.map((size) => {
+          return <Dropdown.Item key={size} onSelect={() => updatePageSize(size)}>{size}</Dropdown.Item>;
+        })}
+      </Dropdown.Content>
+    </Dropdown>
+
+  );
+};