@purpurds/table 0.0.1

package/src/table.stories.tsx

@@ -0,0 +1,1246 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+ 
+
+import React, { useEffect, useState } from "react";
+import { Grid } from "@purpurds/grid";
+import { IllustrativeIconSearchQuestionDuocolor } from "@purpurds/illustrative-icon/search-question-duocolor";
+import { Pagination, PaginationProps } from "@purpurds/pagination";
+import type { Meta, StoryObj } from "@storybook/react";
+import c from "classnames";
+
+import "./table.story.css";
+import "@purpurds/autocomplete/styles";
+import "@purpurds/badge/styles";
+import "@purpurds/button/styles";
+import "@purpurds/checkbox/styles";
+import "@purpurds/cta-link/styles";
+import "@purpurds/drawer/styles";
+import "@purpurds/grid/styles";
+import "@purpurds/icon/styles";
+import "@purpurds/label/styles";
+import "@purpurds/link/styles";
+import "@purpurds/listbox/styles";
+import "@purpurds/pagination/styles";
+import "@purpurds/paragraph/styles";
+import "@purpurds/select/styles";
+import "@purpurds/skeleton/styles";
+import "@purpurds/text-field/styles";
+import "@purpurds/toggle/styles";
+import "@purpurds/tooltip/styles";
+import { columnDef, simpleColumnDef } from "./story-utils/column-def";
+import {
+  generateLargeTableData,
+  SimpleTableData,
+  simpleTableData,
+  TableData,
+} from "./story-utils/table-data";
+import { useFetchTableData } from "./story-utils/use-fetch-table-data-hook";
+import type {
+  ColumnFiltersState,
+  PaginationState,
+  RowSelectionState,
+  VisibilityState,
+} from "./table";
+import { Table } from "./table";
+
+const meta = {
+  title: "Components/Table",
+  component: Table,
+  parameters: {
+    controls: { expanded: true },
+    docs: {
+      description: {
+        component: `
+<Markdown>
+  The Table component is built upon the powerful [TanStack Table](https://tanstack.com/table/v8) library, which provides a robust foundation for handling tabular data. This implementation extends TanStack Table with additional features and customizations specific to our design system.
+
+  ## Features
+
+  ### Core Functionality
+  - **Data Display**: Present tabular data with customizable columns
+  - **Responsive Design**: Adapts to different screen sizes
+  - **Variants**: Primary (default) and secondary styling options
+  - **Expandable**: Can expand to take full screen/container width
+  - **Sticky Headers**: Column headers can remain visible while scrolling
+
+  ### Optional Features
+  - **Sorting**: Enable column sorting with customizable aria labels
+  - **Filtering**: Add column-specific filtering capabilities
+  - **Row Selection**: Allow users to select rows with checkboxes (multi-select) or radio buttons (single-select)
+  - **Pagination**: Paginate large datasets using the built-in pagination component
+  - **Toolbar**: Access table utilities like export, expand, and settings
+  - **Action Bar**: Provide action buttons for selected rows (requires enableActionBar={true})
+  - **Empty State**: Custom content for empty tables
+  - **Loading State**: Skeleton loading indication with customizable row count
+
+  For more details on the core functionality provided by TanStack Table, refer to their [official documentation](https://tanstack.com/table/v8/docs/overview).
+</Markdown>
+        `,
+      },
+    },
+  },
+  argTypes: {
+    enableFilters: {
+      control: "boolean",
+      description: "Enables filtering functionality",
+    },
+    enableSorting: {
+      control: "boolean",
+      description: "Enables sorting functionality",
+    },
+    sortingAriaLabels: {
+      control: "object",
+      description: "Aria labels for sorting",
+      if: { arg: "enableSorting", truthy: true },
+    },
+    enableActionBar: {
+      control: "boolean",
+      description: "Enables action bar",
+    },
+    actionbarCopy: {
+      control: "object",
+      description: "Copy for action bar",
+      if: { arg: "enableActionBar", truthy: true },
+    },
+    enableRowSelection: {
+      control: "boolean",
+      description: "Enables row selection",
+    },
+    enableMultiRowSelection: {
+      control: "boolean",
+      description:
+        "Enables multiple row selection (checkboxes). If set to false, radio buttons will be used for single selection.",
+      if: { arg: "enableRowSelection", truthy: true },
+    },
+    rowSelectionAriaLabels: {
+      control: "object",
+      description: "Copy for row selection",
+    },
+    enableToolbar: {
+      control: "boolean",
+      description: "Enables toolbar",
+    },
+    toolbarCopy: {
+      control: "object",
+      description: "Copy for toolbar",
+      if: { arg: "enableToolbar", truthy: true },
+    },
+    settingsDrawerCopy: {
+      control: "object",
+      description: "Copy for settings drawer",
+      if: { arg: "enableToolbar", truthy: true },
+    },
+    exportFormats: {
+      control: "select",
+      options: ["string", "array"],
+      mapping: {
+        string: "csv",
+        array: ["csv", "xlsx"],
+      },
+      description: "Export formats for the table",
+    },
+    exportDrawerCopy: {
+      control: "object",
+      description: "Copy for exports drawer",
+      if: { arg: "exportFormats", neq: "string" },
+    },
+    loading: {
+      control: "boolean",
+      description: "Loading state for the table",
+    },
+    variant: {
+      control: "select",
+      options: ["primary", "secondary"],
+      description: "Style variant for the table",
+    },
+  },
+} satisfies Meta<typeof Table<TableData>>;
+
+export default meta;
+type StoryTableData = StoryObj<typeof Table<TableData>>;
+type StorySimpleTableData = StoryObj<typeof Table<SimpleTableData>>;
+
+// Generated data for examples
+const generatedTableData = generateLargeTableData(100);
+
+// Common components & props for stories
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const renderTableContainer = (args: any, children: React.ReactNode) => {
+  return (
+    <div
+      style={{
+        paddingTop: "2rem",
+        paddingBottom: "5rem",
+        overflowY: "hidden",
+        backgroundColor:
+          args.variant === "secondary" ? "transparent" : "var(--purpur-color-background-secondary)",
+      }}
+    >
+      <Grid containerClassName={c({ ["escape-grid"]: args.isExpanded })}>{children}</Grid>
+    </div>
+  );
+};
+
+// Common props used across stories
+const commonSortingAriaLabels = {
+  desc: "Sort descending",
+  asc: "Sort ascending",
+  default: "Sort column",
+};
+
+const commonActionbarCopy = {
+  buttons: {
+    cancel: "Cancel selection",
+    primary: "Primary button",
+    secondary: "Secondary button",
+    toggleSelected: "Show only selected rows",
+  },
+  selectedRowsCount: {
+    of: "of",
+    selected: "selected",
+  },
+};
+
+const commonToolbarCopy = {
+  buttons: {
+    export: "Export",
+    expand: "Expand",
+    settings: "Settings",
+    clearFilters: "Clear filters",
+  },
+  ariaLabels: {
+    clearFilters: "Clear all filters",
+    expand: "Expand the table",
+    export: "Open export drawer",
+    settings: "Open settings drawer",
+  },
+  rowCount: {
+    showing: "Showing",
+    of: "of",
+    rows: "rows",
+  },
+};
+
+const commonSettingsDrawerCopy = {
+  title: "Table settings",
+  generalSettings: {
+    header: "General settings",
+    toggles: {
+      showFilters: "Show Filters",
+      lockFirstcolumn: "Lock first column",
+      stickyHeader: "Sticky header",
+      rowSelection: "Row selection",
+    },
+  },
+  visibleColumns: {
+    header: "Visible columns",
+  },
+  buttons: {
+    closeDrawer: "Close drawer",
+    resetSettings: "Reset settings",
+  },
+};
+
+const commonExportDrawerCopy = {
+  title: "Export table",
+  bodyText: "Choose the format you want to export the table in.",
+  closeButtonText: "Close drawer",
+  link: "Export as",
+};
+
+const commonRowSelectionAriaLabels = {
+  header: "Select all rows",
+  row: "Select row",
+};
+
+/**
+ * Showcase demonstrates a fully-featured Table with all available functionality enabled.
+ */
+export const Showcase: StoryTableData = {
+  args: {
+    variant: "primary",
+    enableActionBar: true,
+    enableFilters: true,
+    enableSorting: true,
+    enableToolbar: true,
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    exportFormats: ["csv", "xlsx"],
+    actionbarCopy: commonActionbarCopy,
+    exportDrawerCopy: commonExportDrawerCopy,
+    settingsDrawerCopy: commonSettingsDrawerCopy,
+    sortingAriaLabels: commonSortingAriaLabels,
+    onToggleExpand: () => {},
+    toolbarCopy: commonToolbarCopy,
+    rowSelectionAriaLabels: commonRowSelectionAriaLabels,
+    data: generatedTableData,
+    columns: columnDef,
+    loading: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example showcases a fully-featured Table with all available functionality enabled:
+
+- **Row Selection**: Allows users to select multiple rows with checkboxes
+- **Sorting**: Enables column sorting by clicking column headers
+- **Filtering**: Provides column-specific filtering options
+- **Toolbar**: Includes export, expand, and settings controls
+- **Action Bar**: Shows when rows are selected with primary/secondary action buttons
+- **Expandable Layout**: Demonstrates the table expansion capability
+- **Pagination**: Shows how to integrate with the Pagination component
+
+This example uses client-side data handling where all data is loaded at once and the table 
+manages filtering, sorting and pagination internally.
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const [pagination, setPagination] = useState<PaginationState>({
+      pageIndex: 0,
+      pageSize: 10,
+    });
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+    const [displayData, setDisplayData] = useState(args.data);
+    const [rowCount, setRowCount] = useState(args.data.length);
+
+    const [showOnlySelectedRows, setShowOnlySelectedRows] = useState(false);
+
+    const [tableExpanded, setTableExpanded] = useState(false);
+
+    useEffect(() => {
+      if (showOnlySelectedRows) {
+        const selectedRows = Object.keys(rowSelection).filter(
+          (key) => (rowSelection as Record<string, unknown>)[key]
+        );
+        const filteredData = args.data.filter((row) => selectedRows.includes(`${row.id}`));
+        setDisplayData(filteredData);
+      } else {
+        setDisplayData(args.data);
+      }
+    }, [showOnlySelectedRows, rowSelection, args.data]);
+
+    const handlePrimaryButtonClick = () => {
+      console.log("Primary button clicked.", rowSelection);
+    };
+
+    const defaultArgs: PaginationProps = {
+      onPageChange: (page) => {
+        setPagination({
+          pageIndex: page.currentPage - 1,
+          pageSize: page.pageSize,
+        });
+      },
+      totalItems: rowCount,
+      availablePageSizes: [5, 10, 50],
+      currentPage: pagination.pageIndex + 1,
+      pageSize: pagination.pageSize,
+      pageSizeLabel: "Items per page",
+      nextButtonAriaLabel: "Go to next page",
+      nextButtonText: "Next",
+      outOfLabel: "of",
+      pageSelectorListBoxLabel: "Select a page",
+      pageSelectorNoOptionsText: "Page does not exist",
+      previousButtonAriaLabel: "Go to previous page",
+      previousButtonText: "Previous",
+      stepNumberPrefix: "Go to page",
+    };
+
+    return renderTableContainer(
+      { ...args, isExpanded: tableExpanded },
+      /* @ts-expect-error Props are incompatible. Storybook issue after adding argTypes. */
+      <Table
+        className={c("table-max-height")}
+        enableSorting={args.enableSorting}
+        enableActionBar={args.enableActionBar}
+        variant={args.variant}
+        columns={args.columns}
+        data={displayData}
+        enableRowSelection={args.enableRowSelection}
+        enableMultiRowSelection={args.enableMultiRowSelection}
+        state={{ pagination, rowSelection, columnFilters, columnVisibility }}
+        exportFormats={args.exportFormats}
+        onExportData={args.exportFormats ? (e) => console.log("Export data", e) : undefined}
+        actionbarCopy={args.enableActionBar ? args.actionbarCopy : undefined}
+        sortingAriaLabels={args.enableSorting ? args.sortingAriaLabels : undefined}
+        settingsDrawerCopy={args.settingsDrawerCopy}
+        exportDrawerCopy={args.exportFormats ? args.exportDrawerCopy : undefined}
+        toolbarCopy={args.toolbarCopy}
+        enableFilters={args.enableFilters}
+        enableToolbar={args.enableToolbar}
+        loading={args.loading}
+        onToggleExpand={() => setTableExpanded((prev) => !prev)}
+        paginationComponent={<Pagination {...defaultArgs} />}
+        onRowsCountChange={setRowCount}
+        onColumnVisibilityChange={setColumnVisibility}
+        setShowOnlySelectedRows={setShowOnlySelectedRows}
+        showOnlySelectedRows={showOnlySelectedRows}
+        onRowSelectionChange={setRowSelection}
+        onColumnFiltersChange={setColumnFilters}
+        getRowId={(row: TableData) => `${row.id}`}
+        actionBarTotalRowCount={args.data.length}
+        onPaginationChange={setPagination}
+        onPrimaryButtonClick={handlePrimaryButtonClick}
+        onSecondaryButtonClick={() => console.log("Secondary button clicked")}
+        rowSelectionAriaLabels={args.rowSelectionAriaLabels}
+      />
+    );
+  },
+};
+
+/**
+ * BaseTable shows a simple table with minimal configuration.
+ */
+export const BaseTable: StorySimpleTableData = {
+  args: {
+    variant: "primary",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example shows a basic Table with minimal configuration. It demonstrates the core 
+functionality without any advanced features like filtering, sorting, pagination, or row selection.
+
+### How to enable this feature:
+- Just provide the minimum required props: \`columns\` and \`data\`
+
+### Key points:
+- Basic column configuration with different cell types (leadText, bodyText, link)
+- Simple data display with fixed width columns
+- Default styling and behavior
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    return renderTableContainer(
+      args,
+      <Table
+        variant={args.variant}
+        columns={simpleColumnDef}
+        data={simpleTableData}
+        enableSorting={false}
+        enableRowSelection={false}
+        enableToolbar={false}
+        enableActionBar={false}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates sorting functionality in the Table.
+ */
+export const SortingFeature: StorySimpleTableData = {
+  args: {
+    variant: "primary",
+    enableSorting: true,
+    sortingAriaLabels: commonSortingAriaLabels,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates how to enable column sorting functionality in the Table.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  enableSorting={true}
+  sortingAriaLabels={{
+    desc: "Sort descending",
+    asc: "Sort ascending",
+    default: "Sort column"
+  }}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Click on column headers to sort the data
+- Includes accessibility labels for sorting states
+- Supports ascending and descending sorting
+- When the table has sorted data, a visual indicator appears in the column header
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    // Use simpleTableData instead of generatedTableData
+    return renderTableContainer(
+      args,
+      <Table
+        variant={args.variant}
+        columns={simpleColumnDef}
+        data={simpleTableData}
+        enableRowSelection={false}
+        enableToolbar={false}
+        enableActionBar={false}
+        {...(args.enableSorting
+          ? {
+              enableSorting: true,
+              sortingAriaLabels: args.sortingAriaLabels,
+            }
+          : {
+              enableSorting: false,
+            })}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates filtering functionality in the Table.
+ */
+export const FilteringFeature: StorySimpleTableData = {
+  args: {
+    variant: "primary",
+    enableFilters: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates column filtering functionality in the Table.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  enableFilters={true}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Filter inputs appear below column headers
+- Provides real-time filtering as users type
+- Each column can have its own filter
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+    return renderTableContainer(
+      args,
+      <Table
+        variant={args.variant}
+        columns={simpleColumnDef}
+        data={simpleTableData}
+        enableFilters={args.enableFilters}
+        enableSorting={false}
+        enableRowSelection={false}
+        enableToolbar={false}
+        enableActionBar={false}
+        state={{ columnFilters }}
+        onColumnFiltersChange={setColumnFilters}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates row selection with checkboxes (multi-select) in the Table.
+ */
+export const RowSelectionMulti: StorySimpleTableData = {
+  args: {
+    variant: "primary",
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    rowSelectionAriaLabels: commonRowSelectionAriaLabels,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates multi-row selection functionality with checkboxes.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  enableRowSelection={true}
+  enableMultiRowSelection={true}
+  rowSelectionAriaLabels={{
+    header: "Select all rows",
+    row: "Select row"
+  }}
+  state={{ rowSelection }}
+  onRowSelectionChange={setRowSelection}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Adds checkboxes to each row and in the header
+- Header checkbox functions as a "select all" control
+- Selected rows are highlighted
+- Row selection state can be controlled externally
+- Accessible with proper ARIA labels
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+    const [showOnlySelectedRows, setShowOnlySelectedRows] = useState(false);
+
+    return renderTableContainer(
+      args,
+      <Table
+        variant={args.variant}
+        columns={simpleColumnDef}
+        data={simpleTableData}
+        state={{ rowSelection }}
+        enableRowSelection={true}
+        enableMultiRowSelection={true}
+        rowSelectionAriaLabels={commonRowSelectionAriaLabels}
+        onRowSelectionChange={setRowSelection}
+        showOnlySelectedRows={showOnlySelectedRows}
+        setShowOnlySelectedRows={setShowOnlySelectedRows}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates row selection with radio buttons (single-select) in the Table.
+ */
+export const RowSelectionSingle: StorySimpleTableData = {
+  args: {
+    variant: "primary",
+    enableRowSelection: true,
+    enableMultiRowSelection: false,
+    rowSelectionAriaLabels: commonRowSelectionAriaLabels,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates single-row selection functionality with radio buttons.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  enableRowSelection={true}
+  enableMultiRowSelection={false}
+  rowSelectionAriaLabels={{
+    header: "Select all rows",
+    row: "Select row"
+  }}
+  state={{ rowSelection }}
+  onRowSelectionChange={setRowSelection}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Adds radio buttons to each row (instead of checkboxes)
+- Only one row can be selected at a time
+- Selected rows are highlighted
+- Accessible with proper ARIA labels
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+    const [showOnlySelectedRows, setShowOnlySelectedRows] = useState(false);
+
+    return renderTableContainer(
+      args,
+      <Table
+        variant={args.variant}
+        columns={simpleColumnDef}
+        data={simpleTableData}
+        enableRowSelection={true}
+        enableSorting={false}
+        enableToolbar={false}
+        enableActionBar={false}
+        enableMultiRowSelection={false}
+        rowSelectionAriaLabels={commonRowSelectionAriaLabels}
+        state={{ rowSelection }}
+        onRowSelectionChange={setRowSelection}
+        getRowId={(row: SimpleTableData) => `${row.id}`}
+        showOnlySelectedRows={showOnlySelectedRows}
+        setShowOnlySelectedRows={setShowOnlySelectedRows}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates pagination in the Table.
+ */
+export const PaginationFeature: StoryTableData = {
+  args: {
+    variant: "primary",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates pagination functionality in the Table.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  paginationComponent={<Pagination {...paginationProps} />}
+  state={{ pagination }}
+  onPaginationChange={setPagination}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Displays data in manageable chunks
+- Use \`paginationComponent\` prop to provide a Pagination component
+- The table automatically connects to the pagination controls
+- Supports page size selection
+- Store pagination state in your component's state
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const [pagination, setPagination] = useState<PaginationState>({
+      pageIndex: 0,
+      pageSize: 5,
+    });
+
+    const paginationProps: PaginationProps = {
+      onPageChange: (page) => {
+        setPagination({
+          pageIndex: page.currentPage - 1,
+          pageSize: page.pageSize,
+        });
+      },
+      totalItems: generatedTableData.length,
+      availablePageSizes: [5, 10, 20],
+      currentPage: pagination.pageIndex + 1,
+      pageSize: pagination.pageSize,
+      pageSizeLabel: "Items per page",
+      nextButtonAriaLabel: "Go to next page",
+      nextButtonText: "Next",
+      outOfLabel: "of",
+      pageSelectorListBoxLabel: "Select a page",
+      pageSelectorNoOptionsText: "Page does not exist",
+      previousButtonAriaLabel: "Go to previous page",
+      previousButtonText: "Previous",
+      stepNumberPrefix: "Go to page",
+    };
+
+    return renderTableContainer(
+      args,
+      <Table
+        variant={args.variant}
+        columns={columnDef}
+        data={generatedTableData}
+        enableSorting={false}
+        enableRowSelection={false}
+        enableToolbar={false}
+        enableActionBar={false}
+        state={{ pagination }}
+        onPaginationChange={setPagination}
+        paginationComponent={<Pagination {...paginationProps} />}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates the toolbar feature in the Table.
+ */
+export const ToolbarFeature: StorySimpleTableData = {
+  args: {
+    variant: "primary",
+    enableToolbar: true,
+    enableFilters: true,
+    toolbarCopy: commonToolbarCopy,
+    settingsDrawerCopy: commonSettingsDrawerCopy,
+    exportFormats: ["csv", "xlsx"],
+    exportDrawerCopy: commonExportDrawerCopy,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates the toolbar functionality in the Table.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  enableToolbar={true}
+  toolbarCopy={{...}} // Text content for toolbar buttons
+  settingsDrawerCopy={{...}} // Text content for settings drawer
+  exportFormats={["csv", "xlsx"]} // Optional export formats
+  exportDrawerCopy={{...}} // Text content for export drawer
+  onToggleExpand={handleToggleExpand}
+  onExportData={handleExport}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Provides controls for table management
+- Features can include:
+  - Export functionality (CSV, Excel)
+  - Table expansion
+  - Settings management (column visibility, sticky headers, etc.)
+  - Filter clearing
+- Displays row count information
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const [tableExpanded, setTableExpanded] = useState(false);
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+    return renderTableContainer(
+      { ...args, isExpanded: tableExpanded },
+      <Table
+        variant={args.variant}
+        columns={simpleColumnDef}
+        data={simpleTableData}
+        enableToolbar={true}
+        enableSorting={false}
+        enableRowSelection={false}
+        enableActionBar={false}
+        enableFilters={true}
+        toolbarCopy={commonToolbarCopy}
+        settingsDrawerCopy={commonSettingsDrawerCopy}
+        exportFormats={["csv", "xlsx"]}
+        exportDrawerCopy={commonExportDrawerCopy}
+        onToggleExpand={() => setTableExpanded((prev) => !prev)}
+        onExportData={(format) => console.log(`Exporting in ${format} format`)}
+        state={{ columnFilters, columnVisibility }}
+        onColumnFiltersChange={setColumnFilters}
+        onColumnVisibilityChange={setColumnVisibility}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates the action bar feature for selected rows in the Table.
+ */
+export const ActionBarFeature: StoryTableData = {
+  args: {
+    variant: "primary",
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    enableActionBar: true,
+    actionbarCopy: commonActionbarCopy,
+    rowSelectionAriaLabels: commonRowSelectionAriaLabels,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates the action bar for selected rows.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  enableActionBar={true}
+  enableRowSelection={true}
+  actionbarCopy={{...}}
+  actionBarTotalRowCount={totalRowCount}
+  onPrimaryButtonClick={handlePrimaryAction}
+  onSecondaryButtonClick={handleSecondaryAction}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Appears when rows are selected
+- Shows count of selected rows
+- Provides primary and secondary action buttons
+- Allows filtering to show only selected rows
+- Includes a cancel selection button
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+    const [showOnlySelectedRows, setShowOnlySelectedRows] = useState(false);
+    const [displayData, setDisplayData] = useState(simpleTableData);
+
+    const totalRowCount = simpleTableData.length;
+
+    useEffect(() => {
+      if (showOnlySelectedRows) {
+        const selectedRows = Object.keys(rowSelection).filter(
+          (key) => (rowSelection as Record<string, unknown>)[key]
+        );
+        const filteredData = simpleTableData.filter((row) => selectedRows.includes(`${row.id}`));
+        setDisplayData(filteredData);
+      } else {
+        setDisplayData(simpleTableData);
+      }
+    }, [showOnlySelectedRows, rowSelection]);
+
+    const handlePrimaryButtonClick = () => {
+      console.log("Primary action on selected rows", rowSelection);
+    };
+
+    const handleSecondaryButtonClick = () => {
+      console.log("Secondary action on selected rows", rowSelection);
+    };
+
+    return renderTableContainer(
+      args,
+      <Table<SimpleTableData>
+        variant={args.variant}
+        columns={simpleColumnDef}
+        data={displayData}
+        enableRowSelection={true}
+        enableActionBar={true}
+        enableToolbar={false}
+        enableSorting={false}
+        enableMultiRowSelection={true}
+        actionbarCopy={commonActionbarCopy}
+        rowSelectionAriaLabels={commonRowSelectionAriaLabels}
+        state={{ rowSelection }}
+        onRowSelectionChange={setRowSelection}
+        getRowId={(row: SimpleTableData) => `${row.id}`}
+        actionBarTotalRowCount={totalRowCount}
+        showOnlySelectedRows={showOnlySelectedRows}
+        setShowOnlySelectedRows={setShowOnlySelectedRows}
+        onPrimaryButtonClick={handlePrimaryButtonClick}
+        onSecondaryButtonClick={handleSecondaryButtonClick}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates empty state configuration in the Table.
+ */
+export const EmptyTable: StoryTableData = {
+  args: {
+    variant: "primary",
+    emptyTableCopy: {
+      title: "Title empty table",
+      description: "Body text explaining why the table is empty and what the user can do.",
+    },
+    emptyTableHeadingTag: "h2",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates how to configure the Table to display a custom empty state
+when there is no data to show.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  emptyTableCopy={{
+    title: "No data found",
+    description: "There are no items to display."
+  }}
+  emptyTableHeadingTag="h2"
+  emptyTableIcon={<YourCustomIcon />}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Custom empty state messaging with title and description
+- Visual element (icon) to enhance the empty state
+- Custom heading tag specification for accessibility
+- Proper layout and styling of empty state content
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const tableData: SimpleTableData[] = [];
+
+    const emptyTableProps = {
+      emptyTableCopy: {
+        title: args.emptyTableCopy?.title || "No data found",
+        description: args.emptyTableCopy?.description || "There are no items to display.",
+      },
+      emptyTableHeadingTag: args.emptyTableHeadingTag || "h2",
+    };
+
+    return renderTableContainer(
+      args,
+      <Table
+        variant={args.variant}
+        columns={simpleColumnDef}
+        data={tableData}
+        enableSorting={false}
+        enableRowSelection={false}
+        enableToolbar={false}
+        enableActionBar={false}
+        emptyTableCopy={emptyTableProps.emptyTableCopy}
+        emptyTableHeadingTag={emptyTableProps.emptyTableHeadingTag}
+        emptyTableIcon={<IllustrativeIconSearchQuestionDuocolor />}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates loading state in the Table.
+ */
+export const LoadingTable: StorySimpleTableData = {
+  args: {
+    variant: "primary",
+    loading: true,
+    skeletonRows: 5,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates the loading state of the Table component.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  loading={true}
+  skeletonRows={5}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Loading skeleton animation for rows and cells
+- Configurable number of skeleton rows with the \`skeletonRows\` prop
+- Visual indication to users that content is loading
+- Proper styling that maintains table structure during loading
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const loading = Boolean(args.loading);
+
+    return renderTableContainer(
+      args,
+      <Table
+        variant={args.variant}
+        columns={simpleColumnDef}
+        data={simpleTableData}
+        enableSorting={false}
+        enableRowSelection={false}
+        enableMultiRowSelection={false}
+        enableToolbar={false}
+        enableActionBar={false}
+        loading={loading}
+        skeletonRows={args.skeletonRows || 5}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates server-side data handling for the Table.
+ */
+export const ServerDataHandlingTable: StoryTableData = {
+  args: {
+    variant: "primary",
+    enableActionBar: true,
+    enableFilters: true,
+    enableSorting: true,
+    enableToolbar: true,
+    enableRowSelection: true,
+    enableMultiRowSelection: true,
+    exportFormats: ["csv", "xlsx"],
+    actionbarCopy: commonActionbarCopy,
+    exportDrawerCopy: commonExportDrawerCopy,
+    settingsDrawerCopy: commonSettingsDrawerCopy,
+    sortingAriaLabels: commonSortingAriaLabels,
+    toolbarCopy: commonToolbarCopy,
+    rowSelectionAriaLabels: commonRowSelectionAriaLabels,
+    manualPagination: true,
+    manualSorting: true,
+    manualFiltering: true,
+    columns: columnDef,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates how to implement server-side data handling where pagination, 
+sorting, and filtering are managed by a server API instead of in the browser.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  manualPagination={true}
+  manualSorting={true}
+  manualFiltering={true}
+  onPaginationChange={fetchPageData}
+  onColumnFiltersChange={applyFilters}
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Set \`manualPagination\`, \`manualSorting\`, and \`manualFiltering\` to true
+- Implement handlers for change events to fetch new data from server
+- Display correct total row count via \`toolbarTotalRowCount\`
+- Maintain row selection with server-side pagination
+- Handle state updates to trigger appropriate refetching of data
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    const [pagination, setPagination] = useState<PaginationState>({
+      pageIndex: 0,
+      pageSize: 10,
+    });
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+    const [tableExpanded, setTableExpanded] = useState(false);
+    const [displayData, setDisplayData] = useState<TableData[]>([]);
+    const [showOnlySelectedRows, setShowOnlySelectedRows] = useState(false);
+    const [totalRowCount, setTotalRowCount] = useState(0);
+    const [tableDataRowCount, setTableDataRowCount] = useState(0);
+
+    useEffect(() => {
+      console.log({ rowSelection });
+
+      if (showOnlySelectedRows) {
+        const selectedRows = Object.keys(rowSelection).filter(
+          (key) => (rowSelection as Record<string, unknown>)[key]
+        );
+        const response = useFetchTableData({ selectedRows, pagination });
+
+        setDisplayData(response.data);
+        setTableDataRowCount(response.totalRowCount);
+      } else {
+        const response = useFetchTableData({ pagination });
+        setDisplayData(response.data);
+        setTotalRowCount(response.totalRowCount);
+        setTableDataRowCount(response.totalRowCount);
+      }
+    }, [showOnlySelectedRows, rowSelection, pagination]);
+
+    const paginationProps: PaginationProps = {
+      onPageChange: (page) => {
+        setPagination({
+          pageIndex: page.currentPage - 1,
+          pageSize: page.pageSize,
+        });
+      },
+      totalItems: tableDataRowCount,
+      availablePageSizes: [5, 10, 50],
+      currentPage: pagination.pageIndex + 1,
+      pageSize: pagination.pageSize,
+      pageSizeLabel: "Items per page",
+      nextButtonAriaLabel: "Go to next page",
+      nextButtonText: "Next",
+      outOfLabel: "of",
+      pageSelectorListBoxLabel: "Select a page",
+      pageSelectorNoOptionsText: "Page does not exist",
+      previousButtonAriaLabel: "Go to previous page",
+      previousButtonText: "Previous",
+      stepNumberPrefix: "Go to page",
+    };
+
+    return renderTableContainer(
+      { ...args, isExpanded: tableExpanded },
+      /* @ts-expect-error Props are incompatible. Storybook issue after adding argTypes. */
+      <Table
+        className={c("table-max-height")}
+        enableSorting={true}
+        enableActionBar={true}
+        variant={args.variant}
+        columns={args.columns}
+        data={displayData}
+        enableRowSelection={true}
+        enableToolbar={true}
+        loading={false}
+        state={{ pagination, rowSelection, columnFilters, columnVisibility }}
+        exportFormats={args.exportFormats}
+        onExportData={(e) => console.log("Export data", e)}
+        actionbarCopy={args.actionbarCopy}
+        sortingAriaLabels={args.sortingAriaLabels}
+        settingsDrawerCopy={args.settingsDrawerCopy}
+        exportDrawerCopy={args.exportDrawerCopy}
+        toolbarCopy={args.toolbarCopy}
+        enableFilters={args.enableFilters}
+        enableMultiRowSelection={args.enableMultiRowSelection || true}
+        onToggleExpand={() => setTableExpanded((prev) => !prev)}
+        paginationComponent={<Pagination {...paginationProps} />}
+        onColumnVisibilityChange={setColumnVisibility}
+        setShowOnlySelectedRows={setShowOnlySelectedRows}
+        showOnlySelectedRows={showOnlySelectedRows}
+        onRowSelectionChange={setRowSelection}
+        onColumnFiltersChange={setColumnFilters}
+        getRowId={(row: TableData) => `${row.id}`}
+        actionBarTotalRowCount={totalRowCount}
+        toolbarTotalRowCount={tableDataRowCount}
+        onPaginationChange={setPagination}
+        onPrimaryButtonClick={() => console.log("Primary button clicked.", rowSelection)}
+        onSecondaryButtonClick={() => console.log("Secondary button clicked", rowSelection)}
+        rowSelectionAriaLabels={args.rowSelectionAriaLabels}
+        manualPagination={args.manualPagination || true}
+        manualSorting={args.manualSorting || true}
+        manualFiltering={args.manualFiltering || true}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates the secondary variant for the Table.
+ */
+export const SecondaryVariant: StoryTableData = {
+  args: {
+    variant: "secondary",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+This example demonstrates the secondary visual variant of the Table.
+
+### How to enable this feature:
+\`\`\`jsx
+<Table
+  variant="secondary"
+  ...other props
+/>
+\`\`\`
+
+### Key points:
+- Use the primary (white) Table on secondary (gray) backgrounds and vice versa.
+        `,
+      },
+    },
+  },
+  render: (args) => {
+    return renderTableContainer(
+      args,
+      <Table
+        variant={args.variant}
+        columns={columnDef}
+        data={generatedTableData.slice(0, 5)}
+        enableSorting={false}
+        enableRowSelection={false}
+        enableToolbar={false}
+        enableActionBar={false}
+      />
+    );
+  },
+};