feat: allows to hide the footer of the datatable

Author: TheauW

packages/diracx-web-components/src/components/shared/DataTable.tsx

@@ -209,6 +209,7 @@ function DataTableToolbar<T extends Record<string, unknown>>({
  * @property {React.ReactElement} toolbarComponents - the components to display in the toolbar
  * @property {MenuItem[]} menuItems - the menu items
  * @property {boolean} disableCheckbox - boolean to disable the checkbox
+ * @property {boolean} hideFooter - boolean to hide the footer
  */
 export interface DataTableProps<T extends Record<string, unknown>> {
   /** The title of the table */
@@ -231,6 +232,8 @@ export interface DataTableProps<T extends Record<string, unknown>> {
   menuItems?: MenuItem[];
   /** Boolean to disable the checkbox */
   disableCheckbox?: boolean;
+  /** Whether to hide the footer */
+  hideFooter?: boolean;
 }
 
 /**
@@ -249,6 +252,7 @@ export function DataTable<T extends Record<string, unknown>>({
   toolbarComponents,
   menuItems,
   disableCheckbox = false,
+  hideFooter = false,
 }: DataTableProps<T>) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
@@ -602,19 +606,22 @@ export function DataTable<T extends Record<string, unknown>>({
             );
           }}
         />
-        <TablePagination
-          component="div"
-          rowsPerPageOptions={[25, 50, 100, 500, 1000]}
-          count={totalRows}
-          showFirstButton
-          showLastButton
-          rowsPerPage={table.getState().pagination.pageSize}
-          page={table.getState().pagination.pageIndex}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-          labelRowsPerPage={isMobile ? "" : "Rows per page"}
-          sx={{ flexShrink: 0 }}
-        />
+        {!hideFooter && (
+          <TablePagination
+            component="div"
+            rowsPerPageOptions={[25, 50, 100, 500, 1000]}
+            count={totalRows}
+            showFirstButton
+            showLastButton
+            rowsPerPage={table.getState().pagination.pageSize}
+            page={table.getState().pagination.pageIndex}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            labelRowsPerPage={isMobile ? "" : "Rows per page"}
+            sx={{ flexShrink: 0 }}
+            data-testid="data-table-pagination"
+          />
+        )}
       </Paper>
       {menuItems && (
         <Menu

packages/diracx-web-components/test/DataTable.test.tsx

@@ -1,11 +1,17 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { composeStories } from "@storybook/react";
+import { afterEach, describe, it, expect } from "@jest/globals";
 import * as stories from "../stories/DataTable.stories";
 
 // Compose the stories to get actual Storybook behavior (decorators, args, etc)
 const { Default } = composeStories(stories);
 
+afterEach(() => {
+  // Clean up the DOM after each test to avoid strange behavior
+  cleanup();
+});
+
 describe("DataTable", () => {
   it("renders table title", () => {
     render(<Default />);
@@ -32,4 +38,9 @@ describe("DataTable", () => {
       expect(screen.getByText("Edit")).toBeInTheDocument();
     }
   });
+
+  it("hide footer when hideFooter prop is true", () => {
+    const { queryByTestId } = render(<Default hideFooter={true} />);
+    expect(queryByTestId("data-table-pagination")).not.toBeInTheDocument();
+  });
 });