@arbor-education/design-system.components 0.5.5 → 0.6.0

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

@@ -9,13 +9,20 @@ import { useState, type ComponentProps } from 'react';
 import { RowCountInfo } from './pagination/RowCountInfo';
 import { PaginationPanel } from './pagination/PaginationPanel';
 import { HideColumnsDropdown } from './HideColumnsDropdown';
-import { TableSettingsDropdown } from './pagination/TableSettingsDropdown';
+import { TableSettingsDropdown } from './TableSettingsDropdown';
 import { ModalManager } from 'Components/modal/modalManager/ModalManager';
 import { Modal } from 'Components/modal/Modal';
 import { ModalUtils } from 'Utils/ModalUtils';
 import type { SemanticColorKey } from './cellColorStyles';
-import { BooleanFilter, doesBooleanFilterPass } from './columnFilters/BooleanFilter/BooleanFilter';
-import { doesTimeFilterPass, TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
+import {
+  BooleanFilter,
+  doesBooleanFilterPass,
+} from './columnFilters/BooleanFilter/BooleanFilter';
+import {
+  doesTimeFilterPass,
+  TimeFilter,
+} from './columnFilters/TimeFilter/TimeFilter';
+import type { CustomCellRendererProps } from 'ag-grid-react';
 
 type TableProps = ComponentProps<typeof Table>;
 
@@ -26,7 +33,8 @@ const meta: Meta<TableProps> = {
   parameters: {
     docs: {
       description: {
-        component: 'The Table component is a wrapper around the ag-grid-react component. It provides a set of props that can be used to configure the table.',
+        component:
+          'The Table component is a wrapper around the ag-grid-react component. It provides a set of props that can be used to configure the table.',
       },
     },
   },
@@ -52,11 +60,56 @@ interface RowData {
 }
 
 const sampleData: RowData[] = [
-  { id: 1, name: { value: 'Alice Johnson' }, email: { value: 'alice.johnson@example.com' }, role: { value: 'Developer' }, status: { value: 'Active' }, active: true, time: '2026-01-28 12:00:00', dateOfBirth: new Date(1990, 0, 1) },
-  { id: 2, name: { value: 'Bob Smith' }, email: { value: 'bob.smith@example.com' }, role: { value: 'Designer' }, status: { value: 'Active' }, active: false, time: '2026-01-28 13:00:00', dateOfBirth: new Date(1991, 1, 2) },
-  { id: 3, name: { value: 'Charlie Brown' }, email: { value: 'charlie.brown@example.com' }, role: { value: 'Manager' }, status: { value: 'Inactive' }, active: true, time: '2026-01-28 14:00:00', dateOfBirth: new Date(1992, 2, 3) },
-  { id: 4, name: { value: 'Diana Prince' }, email: { value: 'diana.prince@example.com' }, role: { value: 'Developer' }, status: { value: 'Active' }, active: false, time: '2026-01-28 15:00:00', dateOfBirth: new Date(1993, 3, 4) },
-  { id: 5, name: { value: 'Ethan Hunt' }, email: { value: 'ethan.hunt@example.com' }, role: { value: 'Analyst' }, status: { value: 'Active' }, active: false, time: '2026-01-28 16:00:00', dateOfBirth: new Date(1994, 4, 5) },
+  {
+    id: 1,
+    name: { value: 'Alice Johnson' },
+    email: { value: 'alice.johnson@example.com' },
+    role: { value: 'Developer' },
+    status: { value: 'Active' },
+    active: true,
+    time: '2026-01-28 12:00:00',
+    dateOfBirth: new Date(1990, 0, 1),
+  },
+  {
+    id: 2,
+    name: { value: 'Bob Smith' },
+    email: { value: 'bob.smith@example.com' },
+    role: { value: 'Designer' },
+    status: { value: 'Active' },
+    active: false,
+    time: '2026-01-28 13:00:00',
+    dateOfBirth: new Date(1991, 1, 2),
+  },
+  {
+    id: 3,
+    name: { value: 'Charlie Brown' },
+    email: { value: 'charlie.brown@example.com' },
+    role: { value: 'Manager' },
+    status: { value: 'Inactive' },
+    active: true,
+    time: '2026-01-28 14:00:00',
+    dateOfBirth: new Date(1992, 2, 3),
+  },
+  {
+    id: 4,
+    name: { value: 'Diana Prince' },
+    email: { value: 'diana.prince@example.com' },
+    role: { value: 'Developer' },
+    status: { value: 'Active' },
+    active: false,
+    time: '2026-01-28 15:00:00',
+    dateOfBirth: new Date(1993, 3, 4),
+  },
+  {
+    id: 5,
+    name: { value: 'Ethan Hunt' },
+    email: { value: 'ethan.hunt@example.com' },
+    role: { value: 'Analyst' },
+    status: { value: 'Active' },
+    active: false,
+    time: '2026-01-28 16:00:00',
+    dateOfBirth: new Date(1994, 4, 5),
+  },
 ];
 
 const defaultColDef: ColDef = {
@@ -72,30 +125,69 @@ const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Details',
     children: [
-      { field: 'name', headerTooltip: 'The name of the user', filter: 'agSetColumnFilter' },
-      { field: 'email', headerTooltip: 'The email of the user', filter: 'agSetColumnFilter' },
-      { field: 'role', headerTooltip: 'The role of the user', filter: 'agSetColumnFilter' },
-      { field: 'dateOfBirth', filter: 'agDateColumnFilter', filterParams: { buttons: ['clear', 'apply'] }, headerTooltip: 'The date of birth of the user', valueFormatter: params => params.value instanceof Date ? params.value.toLocaleDateString() : params.value },
+      {
+        field: 'name',
+        headerTooltip: 'The name of the user',
+        filter: 'agSetColumnFilter',
+      },
+      {
+        field: 'email',
+        headerTooltip: 'The email of the user',
+        filter: 'agSetColumnFilter',
+      },
+      {
+        field: 'role',
+        headerTooltip: 'The role of the user',
+        filter: 'agSetColumnFilter',
+      },
+      {
+        field: 'dateOfBirth',
+        filter: 'agDateColumnFilter',
+        filterParams: { buttons: ['clear', 'apply'] },
+        headerTooltip: 'The date of birth of the user',
+        valueFormatter: params =>
+          params.value instanceof Date
+            ? params.value.toLocaleDateString()
+            : params.value,
+      },
     ],
     // Value formatters from the defaultColDef are not respected for non-string value
     // so until AG Grid fixes it we have to do it explicitly on each colDef
     valueFormatter: Table.DefaultValueFormatter,
   },
   { field: 'status', valueFormatter: Table.DefaultValueFormatter },
-  { field: 'active', filter: { component: BooleanFilter, doesFilterPass: doesBooleanFilterPass }, cellDataType: 'boolean', editable: false },
-  { field: 'time', filter: { component: TimeFilter, doesFilterPass: doesTimeFilterPass }, cellDataType: 'string', editable: false },
+  {
+    field: 'active',
+    filter: { component: BooleanFilter, doesFilterPass: doesBooleanFilterPass },
+    cellDataType: 'boolean',
+    editable: false,
+  },
+  {
+    field: 'time',
+    filter: { component: TimeFilter, doesFilterPass: doesTimeFilterPass },
+    cellDataType: 'string',
+    editable: false,
+  },
 ];
 
 const footerContent = [
-  <Button key={0} variant="primary">Button 1</Button>,
+  <Button key={0} variant="primary">
+    Button 1
+  </Button>,
   <RowCountInfo key={3} />,
-  <Button key={2} variant="secondary">Button 2</Button>,
+  <Button key={2} variant="secondary">
+    Button 2
+  </Button>,
 ];
 
 const headerContent = [
   <div key={0} style={{ display: 'flex', gap: '0.5rem' }}>
-    <Button key={0} variant="secondary" size="S">Button 1</Button>
-    <Button key={1} variant="secondary" size="S">Button 2</Button>
+    <Button key={0} variant="secondary" size="S">
+      Button 1
+    </Button>
+    <Button key={1} variant="secondary" size="S">
+      Button 2
+    </Button>
   </div>,
   <div key={1} style={{ display: 'flex', gap: '1rem' }}>
     <Icon name="download" />
@@ -178,7 +270,8 @@ export const WithBulkActions: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'The BulkActionsDropdown component is used to add bulk actions to the table. We don\'t provide any bulk actions by default, you need to pass the actions prop to the BulkActionsDropdown component.',
+        story:
+          "The BulkActionsDropdown component is used to add bulk actions to the table. We don't provide any bulk actions by default, you need to pass the actions prop to the BulkActionsDropdown component.",
       },
     },
   },
@@ -192,14 +285,17 @@ export const WithBulkActions: Story = {
         key={0}
         actions={[
           {
-            displayName: 'foo', callback: (gridApi) => {
+            displayName: 'foo',
+            callback: (gridApi) => {
               console.log('clicked on the foo action', gridApi);
             },
           },
           {
-            displayName: 'bar', callback: (gridApi) => {
+            displayName: 'bar',
+            callback: (gridApi) => {
               console.log('clicked on the bar action', gridApi);
-            }, disabled: true,
+            },
+            disabled: true,
           },
         ]}
       />,
@@ -211,7 +307,8 @@ export const WithHideColumnsDropdown: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'The HideColumnsDropdown component is used to hide columns in the table. It is used in the header content of the table.',
+        story:
+          'The HideColumnsDropdown component is used to hide columns in the table. It is used in the header content of the table.',
       },
     },
   },
@@ -256,7 +353,8 @@ export const WithRestrictedHideColumnsDropdown: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'If you want to exclude certain columns from the HideColumnsDropdown, you can pass the columns prop to the HideColumnsDropdown component and it will only display the columns that are passed to it.',
+        story:
+          'If you want to exclude certain columns from the HideColumnsDropdown, you can pass the columns prop to the HideColumnsDropdown component and it will only display the columns that are passed to it.',
       },
     },
   },
@@ -308,7 +406,8 @@ export const WithClientSidePagination: StoryObj<TableProps> = {
   parameters: {
     docs: {
       description: {
-        story: 'For simple client side pagination you just need to set the pagination prop to true and use the PaginationPanel component to render the pagination controls.',
+        story:
+          'For simple client side pagination you just need to set the pagination prop to true and use the PaginationPanel component to render the pagination controls.',
       },
     },
   },
@@ -318,7 +417,12 @@ export const WithClientSidePagination: StoryObj<TableProps> = {
     defaultColDef,
     domLayout: 'autoHeight',
     pagination: true,
-    footerContent: <PaginationPanel availableSizes={[1, 2, 3, 4, 'All']} initialPageSize={2} />,
+    footerContent: (
+      <PaginationPanel
+        availableSizes={[1, 2, 3, 4, 'All']}
+        initialPageSize={2}
+      />
+    ),
   },
 };
 
@@ -326,7 +430,8 @@ export const WithServerSidePagination: StoryObj<TableProps> = {
   parameters: {
     docs: {
       description: {
-        story: 'For server side or custom pagination you need to implement the pagination logic yourself and pass the logic via props to the PaginationPanel.',
+        story:
+          'For server side or custom pagination you need to implement the pagination logic yourself and pass the logic via props to the PaginationPanel.',
       },
     },
   },
@@ -345,7 +450,10 @@ export const WithServerSidePagination: StoryObj<TableProps> = {
 
     const splitRowDataBasedOnPageSize = (arr: RowData[]): RowData[][] =>
       arr.length > currentPageSize
-        ? [arr.slice(0, currentPageSize), ...splitRowDataBasedOnPageSize(arr.slice(currentPageSize))]
+        ? [
+            arr.slice(0, currentPageSize),
+            ...splitRowDataBasedOnPageSize(arr.slice(currentPageSize)),
+          ]
         : [arr];
 
     const pageData = splitRowDataBasedOnPageSize(sampleData);
@@ -376,33 +484,92 @@ export const WithServerSidePagination: StoryObj<TableProps> = {
 const sampleColumnDefsWithButtonCellRenderer: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Details',
-    children: [{
-      field: 'name',
-      headerTooltip: 'The name of the user',
-      cellRenderer: 'dsButtonCellRenderer',
-      cellRendererParams: {
-        supressCellFocusAndFocusFirstElement: true,
+    children: [
+      {
+        field: 'name',
+        headerTooltip: 'The name of the user',
+        cellRenderer: 'dsButtonCellRenderer',
+        cellRendererParams: {
+          supressCellFocusAndFocusFirstElement: true,
+        },
+        editable: false,
       },
-      editable: false,
-    }, {
-      field: 'email',
-      headerTooltip: 'The email of the user',
-    }, {
-      field: 'role',
-      headerTooltip: 'The role of the user',
-    }],
+      {
+        field: 'email',
+        headerTooltip: 'The email of the user',
+      },
+      {
+        field: 'role',
+        headerTooltip: 'The role of the user',
+      },
+    ],
   },
   { field: 'status' },
 ];
 
-const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => alert(`clicked on the button ${e.currentTarget.value}`);
+const handleClick = (e: React.MouseEvent<HTMLButtonElement>) =>
+  alert(`clicked on the button ${e.currentTarget.value}`);
 
 const sampleDataWithButtonCellRenderer = [
-  { id: 1, name: { children: 'Alice Johnson', value: 'Alice Johnson', onClick: handleClick }, email: 'alice.johnson@example.com', role: 'Developer', status: 'Active' },
-  { id: 2, name: { children: 'Bob Smith', variant: 'secondary', value: 'Bob Smith', onClick: handleClick }, email: 'bob.smith@example.com', role: 'Designer', status: 'Active' },
-  { id: 3, name: { children: 'Charlie Brown', size: 'S', value: 'Charlie Brown', onClick: handleClick }, email: 'charlie.brown@example.com', role: 'Manager', status: 'Inactive' },
-  { id: 4, name: { children: 'Diana Prince', disabled: true, value: 'Diana Prince', onClick: handleClick }, email: 'diana.prince@example.com', role: 'Developer', status: 'Active' },
-  { id: 5, name: { children: 'Ethan Hunt', iconLeftName: 'download', value: 'Ethan Hunt', onClick: handleClick }, email: 'ethan.hunt@example.com', role: 'Analyst', status: 'Active' },
+  {
+    id: 1,
+    name: {
+      children: 'Alice Johnson',
+      value: 'Alice Johnson',
+      onClick: handleClick,
+    },
+    email: 'alice.johnson@example.com',
+    role: 'Developer',
+    status: 'Active',
+  },
+  {
+    id: 2,
+    name: {
+      children: 'Bob Smith',
+      variant: 'secondary',
+      value: 'Bob Smith',
+      onClick: handleClick,
+    },
+    email: 'bob.smith@example.com',
+    role: 'Designer',
+    status: 'Active',
+  },
+  {
+    id: 3,
+    name: {
+      children: 'Charlie Brown',
+      size: 'S',
+      value: 'Charlie Brown',
+      onClick: handleClick,
+    },
+    email: 'charlie.brown@example.com',
+    role: 'Manager',
+    status: 'Inactive',
+  },
+  {
+    id: 4,
+    name: {
+      children: 'Diana Prince',
+      disabled: true,
+      value: 'Diana Prince',
+      onClick: handleClick,
+    },
+    email: 'diana.prince@example.com',
+    role: 'Developer',
+    status: 'Active',
+  },
+  {
+    id: 5,
+    name: {
+      children: 'Ethan Hunt',
+      iconLeftName: 'download',
+      value: 'Ethan Hunt',
+      onClick: handleClick,
+    },
+    email: 'ethan.hunt@example.com',
+    role: 'Analyst',
+    status: 'Active',
+  },
 ];
 
 export const WithButtonCellRenderer: Story = {
@@ -416,177 +583,248 @@ export const WithButtonCellRenderer: Story = {
   },
 };
 
-export const WithButtonCellRendererThatOpensAModalWithModalManager: StoryObj<TableProps> = {
-  args: {
-    rowData: sampleData,
-    columnDefs: sampleColumnDefs,
-    defaultColDef,
-    domLayout: 'autoHeight',
-  },
-  render: () => {
-    const ModalContent = (name: string) => (
-      <>
-        <Modal.Header>
-          <Modal.Title>
-            You've clicked on
-            {' '}
-            {name}
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <p>Look at you go.</p>
-        </Modal.Body>
-      </>
-    );
-
-    const sampleData = [
-      { id: 1, name: { children: 'Alice Johnson', value: 'Alice Johnson', onClick: () => ModalUtils.addModal({ children: ModalContent('Alice Johnson') }) }, email: 'alice.johnson@example.com', role: 'Developer', status: 'Active' },
-      { id: 2, name: { children: 'Bob Smith', variant: 'secondary', value: 'Bob Smith', onClick: () => ModalUtils.addModal({ children: ModalContent('Bob Smith') }) }, email: 'bob.smith@example.com', role: 'Designer', status: 'Active' },
-      { id: 3, name: { children: 'Charlie Brown', size: 'S', value: 'Charlie Brown', onClick: () => ModalUtils.addModal({ children: ModalContent('Charlie Brown') }) }, email: 'charlie.brown@example.com', role: 'Manager', status: 'Inactive' },
-      { id: 4, name: { children: 'Diana Prince', disabled: true, value: 'Diana Prince', onClick: () => ModalUtils.addModal({ children: ModalContent('Diana Prince') }) }, email: 'diana.prince@example.com', role: 'Developer', status: 'Active' },
-      { id: 5, name: { children: 'Ethan Hunt', iconLeftName: 'download', value: 'Ethan Hunt', onClick: () => ModalUtils.addModal({ children: ModalContent('Ethan Hunt') }) }, email: 'ethan.hunt@example.com', role: 'Analyst', status: 'Active' },
-    ];
-    return (
-      <>
-        <Table
-          rowData={sampleData}
-          columnDefs={sampleColumnDefsWithButtonCellRenderer}
-          defaultColDef={defaultColDef}
-          domLayout="autoHeight"
-        />
-        <ModalManager />
-      </>
+export const WithButtonCellRendererThatOpensAModalWithModalManager: StoryObj<TableProps>
+  = {
+    args: {
+      rowData: sampleData,
+      columnDefs: sampleColumnDefs,
+      defaultColDef,
+      domLayout: 'autoHeight',
+    },
+    render: () => {
+      const ModalContent = (name: string) => (
+        <>
+          <Modal.Header>
+            <Modal.Title>
+              You've clicked on
+              {name}
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <p>Look at you go.</p>
+          </Modal.Body>
+        </>
+      );
 
-    );
-  },
-};
+      const sampleData = [
+        {
+          id: 1,
+          name: {
+            children: 'Alice Johnson',
+            value: 'Alice Johnson',
+            onClick: () =>
+              ModalUtils.addModal({ children: ModalContent('Alice Johnson') }),
+          },
+          email: 'alice.johnson@example.com',
+          role: 'Developer',
+          status: 'Active',
+        },
+        {
+          id: 2,
+          name: {
+            children: 'Bob Smith',
+            variant: 'secondary',
+            value: 'Bob Smith',
+            onClick: () =>
+              ModalUtils.addModal({ children: ModalContent('Bob Smith') }),
+          },
+          email: 'bob.smith@example.com',
+          role: 'Designer',
+          status: 'Active',
+        },
+        {
+          id: 3,
+          name: {
+            children: 'Charlie Brown',
+            size: 'S',
+            value: 'Charlie Brown',
+            onClick: () =>
+              ModalUtils.addModal({ children: ModalContent('Charlie Brown') }),
+          },
+          email: 'charlie.brown@example.com',
+          role: 'Manager',
+          status: 'Inactive',
+        },
+        {
+          id: 4,
+          name: {
+            children: 'Diana Prince',
+            disabled: true,
+            value: 'Diana Prince',
+            onClick: () =>
+              ModalUtils.addModal({ children: ModalContent('Diana Prince') }),
+          },
+          email: 'diana.prince@example.com',
+          role: 'Developer',
+          status: 'Active',
+        },
+        {
+          id: 5,
+          name: {
+            children: 'Ethan Hunt',
+            iconLeftName: 'download',
+            value: 'Ethan Hunt',
+            onClick: () =>
+              ModalUtils.addModal({ children: ModalContent('Ethan Hunt') }),
+          },
+          email: 'ethan.hunt@example.com',
+          role: 'Analyst',
+          status: 'Active',
+        },
+      ];
+      return (
+        <>
+          <Table
+            rowData={sampleData}
+            columnDefs={sampleColumnDefsWithButtonCellRenderer}
+            defaultColDef={defaultColDef}
+            domLayout="autoHeight"
+          />
+          <ModalManager />
+        </>
+      );
+    },
+  };
 
-export const WithButtonCellRendererThatOpensAModalWithComposableModal: StoryObj<TableProps> = {
-  args: {
-    rowData: sampleData,
-    columnDefs: sampleColumnDefs,
-    defaultColDef,
-    domLayout: 'autoHeight',
-  },
-  render: () => {
-    const [activePersonId, setActivePersonId] = useState<number | null>(null);
-    const [showModal, setShowModal] = useState(false);
+export const WithButtonCellRendererThatOpensAModalWithComposableModal: StoryObj<TableProps>
+  = {
+    args: {
+      rowData: sampleData,
+      columnDefs: sampleColumnDefs,
+      defaultColDef,
+      domLayout: 'autoHeight',
+    },
+    render: () => {
+      const [activePersonId, setActivePersonId] = useState<number | null>(null);
+      const [showModal, setShowModal] = useState(false);
 
-    const sampleData = [
-      {
-        id: 1,
-        name: {
-          children: 'Alice Johnson',
-          value: 'Alice Johnson',
-          onClick: () => {
-            setActivePersonId(1);
-            setShowModal(true);
+      const sampleData = [
+        {
+          id: 1,
+          name: {
+            children: 'Alice Johnson',
+            value: 'Alice Johnson',
+            onClick: () => {
+              setActivePersonId(1);
+              setShowModal(true);
+            },
           },
+          email: 'alice.johnson@example.com',
+          role: 'Developer',
+          status: 'Active',
         },
-        email: 'alice.johnson@example.com',
-        role: 'Developer',
-        status: 'Active',
-      },
-      {
-        id: 2,
-        name: {
-          children: 'Bob Smith',
-          variant: 'secondary',
-          value: 'Bob Smith',
-          onClick: () => {
-            setActivePersonId(2);
-            setShowModal(true);
+        {
+          id: 2,
+          name: {
+            children: 'Bob Smith',
+            variant: 'secondary',
+            value: 'Bob Smith',
+            onClick: () => {
+              setActivePersonId(2);
+              setShowModal(true);
+            },
           },
+          email: 'bob.smith@example.com',
+          role: 'Designer',
+          status: 'Active',
         },
-        email: 'bob.smith@example.com',
-        role: 'Designer',
-        status: 'Active',
-      },
-      {
-        id: 3,
-        name: {
-          children: 'Charlie Brown',
-          size: 'S',
-          value: 'Charlie Brown',
-          onClick: () => {
-            setActivePersonId(3);
-            setShowModal(true);
+        {
+          id: 3,
+          name: {
+            children: 'Charlie Brown',
+            size: 'S',
+            value: 'Charlie Brown',
+            onClick: () => {
+              setActivePersonId(3);
+              setShowModal(true);
+            },
           },
+          email: 'charlie.brown@example.com',
+          role: 'Manager',
+          status: 'Inactive',
         },
-        email: 'charlie.brown@example.com',
-        role: 'Manager',
-        status: 'Inactive',
-      },
-      {
-        id: 4,
-        name: {
-          children: 'Diana Prince',
-          disabled: true,
-          value: 'Diana Prince',
-          onClick: () => {
-            setActivePersonId(4);
-            setShowModal(true);
+        {
+          id: 4,
+          name: {
+            children: 'Diana Prince',
+            disabled: true,
+            value: 'Diana Prince',
+            onClick: () => {
+              setActivePersonId(4);
+              setShowModal(true);
+            },
           },
+          email: 'diana.prince@example.com',
+          role: 'Developer',
+          status: 'Active',
         },
-        email: 'diana.prince@example.com',
-        role: 'Developer',
-        status: 'Active',
-      },
-      {
-        id: 5,
-        name: {
-          children: 'Ethan Hunt',
-          iconLeftName: 'download',
-          value: 'Ethan Hunt',
-          onClick: () => {
-            setActivePersonId(5);
-            setShowModal(true);
+        {
+          id: 5,
+          name: {
+            children: 'Ethan Hunt',
+            iconLeftName: 'download',
+            value: 'Ethan Hunt',
+            onClick: () => {
+              setActivePersonId(5);
+              setShowModal(true);
+            },
           },
+          email: 'ethan.hunt@example.com',
+          role: 'Analyst',
+          status: 'Active',
         },
-        email: 'ethan.hunt@example.com',
-        role: 'Analyst',
-        status: 'Active',
-      },
-    ];
-    return (
-      <>
-        <Table
-          rowData={sampleData}
-          columnDefs={sampleColumnDefsWithButtonCellRenderer}
-          defaultColDef={defaultColDef}
-          domLayout="autoHeight"
-        />
-        <Modal open={showModal} closeHandler={() => setShowModal(false)}>
-          <Modal.Header>
-            <Modal.Title>
-              You've clicked on
-              {' '}
-              {sampleData.find(person => person.id === activePersonId)?.name.children}
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <p>Look at you go.</p>
-          </Modal.Body>
-          <Modal.Footer>
-            <Button variant="tertiary" onClick={() => setShowModal(false)}>Close</Button>
-            <Button variant="primary" onClick={() => setShowModal(false)}>Primary Action</Button>
-          </Modal.Footer>
-        </Modal>
-      </>
-
-    );
-  },
-};
+      ];
+      return (
+        <>
+          <Table
+            rowData={sampleData}
+            columnDefs={sampleColumnDefsWithButtonCellRenderer}
+            defaultColDef={defaultColDef}
+            domLayout="autoHeight"
+          />
+          <Modal open={showModal} closeHandler={() => setShowModal(false)}>
+            <Modal.Header>
+              <Modal.Title>
+                You've clicked on
+                {' '}
+                {
+                  sampleData.find(person => person.id === activePersonId)
+                    ?.name.children
+                }
+              </Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+              <p>Look at you go.</p>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button variant="tertiary" onClick={() => setShowModal(false)}>
+                Close
+              </Button>
+              <Button variant="primary" onClick={() => setShowModal(false)}>
+                Primary Action
+              </Button>
+            </Modal.Footer>
+          </Modal>
+        </>
+      );
+    },
+  };
 
 export const WithInlineTextCellRenderer: Story = {
   args: {
     rowData: sampleData,
-    columnDefs: [{ field: 'name', cellRenderer: 'dsInlineTextCellRenderer', cellRendererParams: {
-      supressCellFocusAndFocusFirstElement: true,
-      suppressCount: true,
-      suppressDoubleClickExpand: true,
-      suppressEnterExpand: true,
-    } }],
+    columnDefs: [
+      {
+        field: 'name',
+        cellRenderer: 'dsInlineTextCellRenderer',
+        cellRendererParams: {
+          supressCellFocusAndFocusFirstElement: true,
+          suppressCount: true,
+          suppressDoubleClickExpand: true,
+          suppressEnterExpand: true,
+        },
+      },
+    ],
     defaultColDef,
     domLayout: 'autoHeight',
   },
@@ -597,7 +835,10 @@ export const WithTreeData: Story = {
     columnDefs: [
       {
         headerName: 'Details',
-        children: [{ field: 'email', headerTooltip: 'The email of the user' }, { field: 'role', headerTooltip: 'The role of the user' }],
+        children: [
+          { field: 'email', headerTooltip: 'The email of the user' },
+          { field: 'role', headerTooltip: 'The role of the user' },
+        ],
       },
       { field: 'status' },
     ],
@@ -618,17 +859,47 @@ export const WithTreeData: Story = {
         id: 1,
         name: 'Group 1',
         children: [
-          { id: 2, name: 'Alice Johnson', email: 'alice.johnson@example.com', role: 'Developer', status: 'Active' },
-          { id: 3, name: 'Bob Smith', email: 'bob.smith@example.com', role: 'Designer', status: 'Active' },
+          {
+            id: 2,
+            name: 'Alice Johnson',
+            email: 'alice.johnson@example.com',
+            role: 'Developer',
+            status: 'Active',
+          },
+          {
+            id: 3,
+            name: 'Bob Smith',
+            email: 'bob.smith@example.com',
+            role: 'Designer',
+            status: 'Active',
+          },
         ],
       },
       {
         id: 4,
         name: 'Group 2',
         children: [
-          { id: 5, name: 'Charlie Brown', email: 'charlie.brown@example.com', role: 'Manager', status: 'Inactive' },
-          { id: 6, name: 'Diana Prince', email: 'diana.prince@example.com', role: 'Developer', status: 'Active' },
-          { id: 7, name: 'Ethan Hunt', email: 'ethan.hunt@example.com', role: 'Analyst', status: 'Active' },
+          {
+            id: 5,
+            name: 'Charlie Brown',
+            email: 'charlie.brown@example.com',
+            role: 'Manager',
+            status: 'Inactive',
+          },
+          {
+            id: 6,
+            name: 'Diana Prince',
+            email: 'diana.prince@example.com',
+            role: 'Developer',
+            status: 'Active',
+          },
+          {
+            id: 7,
+            name: 'Ethan Hunt',
+            email: 'ethan.hunt@example.com',
+            role: 'Analyst',
+            status: 'Active',
+          },
         ],
       },
     ],
@@ -638,19 +909,23 @@ export const WithTreeData: Story = {
 const colDefsWithValidation: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Details',
-    children: [{
-      field: 'name',
-      headerTooltip: 'The name of the user',
-      cellEditorParams: {
-        maxLength: 10,
-      },
-    }, {
-      field: 'email',
-      headerTooltip: 'The email of the user',
-    }, {
-      field: 'role',
-      headerTooltip: 'The role of the user',
-    }],
+    children: [
+      {
+        field: 'name',
+        headerTooltip: 'The name of the user',
+        cellEditorParams: {
+          maxLength: 10,
+        },
+      },
+      {
+        field: 'email',
+        headerTooltip: 'The email of the user',
+      },
+      {
+        field: 'role',
+        headerTooltip: 'The role of the user',
+      },
+    ],
   },
   { field: 'status' },
 ];
@@ -659,7 +934,8 @@ export const WithValidation: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'See https://www.ag-grid.com/react-data-grid/cell-editing-validation/ for more information. The name field has a max length of 10 characters in this example. The cell gets invalid styling when it is being edited and the value is longer than 10 characters.',
+        story:
+          'See https://www.ag-grid.com/react-data-grid/cell-editing-validation/ for more information. The name field has a max length of 10 characters in this example. The cell gets invalid styling when it is being edited and the value is longer than 10 characters.',
       },
     },
   },
@@ -676,22 +952,27 @@ export const WithValidation: Story = {
 const colDefsWithValidationClasses: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Details',
-    children: [{
-      field: 'name',
-      headerTooltip: 'The name of the user',
-      cellEditorParams: {
-        maxLength: 10,
+    children: [
+      {
+        field: 'name',
+        headerTooltip: 'The name of the user',
+        cellEditorParams: {
+          maxLength: 10,
+        },
+        cellClassRules: {
+          'ds-table__cell--invalid': params =>
+            params.value?.value?.length > 10,
+        },
       },
-      cellClassRules: {
-        'ds-table__cell--invalid': params => params.value?.value?.length > 10,
+      {
+        field: 'email',
+        headerTooltip: 'The email of the user',
       },
-    }, {
-      field: 'email',
-      headerTooltip: 'The email of the user',
-    }, {
-      field: 'role',
-      headerTooltip: 'The role of the user',
-    }],
+      {
+        field: 'role',
+        headerTooltip: 'The role of the user',
+      },
+    ],
   },
   { field: 'status' },
 ];
@@ -700,7 +981,8 @@ export const WithValidationClassesAdded: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'If you need to show invalid styling in the cell when not editing, you can add the ds-table__cell--invalid class to the cell. See https://www.ag-grid.com/javascript-data-grid/cell-styles/ on how to add styling to cells.',
+        story:
+          'If you need to show invalid styling in the cell when not editing, you can add the ds-table__cell--invalid class to the cell. See https://www.ag-grid.com/javascript-data-grid/cell-styles/ on how to add styling to cells.',
       },
     },
   },
@@ -737,7 +1019,13 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
     headerName: 'Assessment Component',
     field: 'assessmentComponent',
     cellRenderer: 'dsSelectDropdownCellRenderer',
-    cellRendererParams: { options: assessmentComponentOptions, placeholder: 'Select' },
+    cellRendererParams: (params: CustomCellRendererProps) => {
+      return {
+        options: assessmentComponentOptions,
+        placeholder: 'Select',
+        hasError: params.node.data.assessmentComponent === 'comp-maths',
+      };
+    },
     editable: false,
   },
   {
@@ -770,27 +1058,90 @@ const marksheetTidyTableData = [
     id: 2,
     name: 'Autumn',
     children: [
-      { id: 3, name: 'English Language', assessmentComponent: 'comp-english-lang', visibility: 'auto-visible', editable: true, formatting: undefined },
-      { id: 4, name: 'English Literature', assessmentComponent: 'comp-english-lit', visibility: 'auto-visible', editable: true, formatting: undefined },
-      { id: 5, name: 'Maths', assessmentComponent: 'comp-maths', visibility: 'auto-visible', editable: true, formatting: undefined },
+      {
+        id: 3,
+        name: 'English Language',
+        assessmentComponent: 'comp-english-lang',
+        visibility: 'auto-visible',
+        editable: true,
+        formatting: undefined,
+      },
+      {
+        id: 4,
+        name: 'English Literature',
+        assessmentComponent: 'comp-english-lit',
+        visibility: 'auto-visible',
+        editable: true,
+        formatting: undefined,
+      },
+      {
+        id: 5,
+        name: 'Maths',
+        assessmentComponent: 'comp-maths',
+        visibility: 'auto-visible',
+        editable: true,
+        formatting: undefined,
+      },
     ],
   },
   {
     id: 6,
     name: 'Spring',
     children: [
-      { id: 7, name: 'English Language', assessmentComponent: 'comp-english-lang', visibility: 'auto-visible', editable: true, formatting: undefined },
-      { id: 8, name: 'English Literature', assessmentComponent: 'comp-english-lit', visibility: 'auto-visible', editable: true, formatting: undefined },
-      { id: 9, name: 'Maths', assessmentComponent: 'comp-maths', visibility: 'auto-visible', editable: true, formatting: undefined },
+      {
+        id: 7,
+        name: 'English Language',
+        assessmentComponent: 'comp-english-lang',
+        visibility: 'auto-visible',
+        editable: true,
+        formatting: undefined,
+      },
+      {
+        id: 8,
+        name: 'English Literature',
+        assessmentComponent: 'comp-english-lit',
+        visibility: 'auto-visible',
+        editable: true,
+        formatting: undefined,
+      },
+      {
+        id: 9,
+        name: 'Maths',
+        assessmentComponent: 'comp-maths',
+        visibility: 'auto-visible',
+        editable: true,
+        formatting: undefined,
+      },
     ],
   },
   {
     id: 10,
     name: 'Summer',
     children: [
-      { id: 11, name: 'English Language', assessmentComponent: 'comp-english-lang', visibility: 'auto-visible', editable: true, formatting: undefined },
-      { id: 12, name: 'English Literature', assessmentComponent: 'comp-english-lit', visibility: 'auto-visible', editable: true, formatting: undefined },
-      { id: 13, name: 'Maths', assessmentComponent: 'comp-maths', visibility: 'auto-visible', editable: true, formatting: undefined },
+      {
+        id: 11,
+        name: 'English Language',
+        assessmentComponent: 'comp-english-lang',
+        visibility: 'auto-visible',
+        editable: true,
+        formatting: undefined,
+      },
+      {
+        id: 12,
+        name: 'English Literature',
+        assessmentComponent: 'comp-english-lit',
+        visibility: 'auto-visible',
+        editable: true,
+        formatting: undefined,
+      },
+      {
+        id: 13,
+        name: 'Maths',
+        assessmentComponent: 'comp-maths',
+        visibility: 'auto-visible',
+        editable: true,
+        formatting: undefined,
+      },
     ],
   },
 ];
@@ -835,38 +1186,98 @@ export const TableWithExplicitColours: Story = {
     rowData: [
       {
         id: 1,
-        name: { value: 'Alice Johnson', backgroundColor: '#e3f2fd', foregroundColor: '#0d47a1' },
+        name: {
+          value: 'Alice Johnson',
+          backgroundColor: '#e3f2fd',
+          foregroundColor: '#0d47a1',
+        },
         email: { value: 'alice.johnson@example.com' },
-        role: { value: 'Developer', backgroundColor: '#c8e6c9', foregroundColor: '#1b5e20' },
-        status: { value: 'Active', backgroundColor: '#a5d6a7', foregroundColor: '#2e7d32' },
+        role: {
+          value: 'Developer',
+          backgroundColor: '#c8e6c9',
+          foregroundColor: '#1b5e20',
+        },
+        status: {
+          value: 'Active',
+          backgroundColor: '#a5d6a7',
+          foregroundColor: '#2e7d32',
+        },
       },
       {
         id: 2,
-        name: { value: 'Bob Smith', backgroundColor: '#fff3e0', foregroundColor: '#e65100' },
+        name: {
+          value: 'Bob Smith',
+          backgroundColor: '#fff3e0',
+          foregroundColor: '#e65100',
+        },
         email: { value: 'bob.smith@example.com' },
-        role: { value: 'Designer', backgroundColor: '#f3e5f5', foregroundColor: '#4a148c' },
-        status: { value: 'Active', backgroundColor: '#a5d6a7', foregroundColor: '#2e7d32' },
+        role: {
+          value: 'Designer',
+          backgroundColor: '#f3e5f5',
+          foregroundColor: '#4a148c',
+        },
+        status: {
+          value: 'Active',
+          backgroundColor: '#a5d6a7',
+          foregroundColor: '#2e7d32',
+        },
       },
       {
         id: 3,
-        name: { value: 'Charlie Brown', backgroundColor: '#fce4ec', foregroundColor: '#880e4f' },
+        name: {
+          value: 'Charlie Brown',
+          backgroundColor: '#fce4ec',
+          foregroundColor: '#880e4f',
+        },
         email: { value: 'charlie.brown@example.com' },
-        role: { value: 'Manager', backgroundColor: '#fff9c4', foregroundColor: '#f57f17' },
-        status: { value: 'Inactive', backgroundColor: '#ffcdd2', foregroundColor: '#b71c1c' },
+        role: {
+          value: 'Manager',
+          backgroundColor: '#fff9c4',
+          foregroundColor: '#f57f17',
+        },
+        status: {
+          value: 'Inactive',
+          backgroundColor: '#ffcdd2',
+          foregroundColor: '#b71c1c',
+        },
       },
       {
         id: 4,
-        name: { value: 'Diana Prince', backgroundColor: '#e1bee7', foregroundColor: '#6a1b9a' },
+        name: {
+          value: 'Diana Prince',
+          backgroundColor: '#e1bee7',
+          foregroundColor: '#6a1b9a',
+        },
         email: { value: 'diana.prince@example.com' },
-        role: { value: 'Developer', backgroundColor: '#c8e6c9', foregroundColor: '#1b5e20' },
-        status: { value: 'Active', backgroundColor: '#a5d6a7', foregroundColor: '#2e7d32' },
+        role: {
+          value: 'Developer',
+          backgroundColor: '#c8e6c9',
+          foregroundColor: '#1b5e20',
+        },
+        status: {
+          value: 'Active',
+          backgroundColor: '#a5d6a7',
+          foregroundColor: '#2e7d32',
+        },
       },
       {
         id: 5,
-        name: { value: 'Ethan Hunt', backgroundColor: '#b2ebf2', foregroundColor: '#006064' },
+        name: {
+          value: 'Ethan Hunt',
+          backgroundColor: '#b2ebf2',
+          foregroundColor: '#006064',
+        },
         email: { value: 'ethan.hunt@example.com' },
-        role: { value: 'Analyst', backgroundColor: '#ffccbc', foregroundColor: '#bf360c' },
-        status: { value: 'Active', backgroundColor: '#a5d6a7', foregroundColor: '#2e7d32' },
+        role: {
+          value: 'Analyst',
+          backgroundColor: '#ffccbc',
+          foregroundColor: '#bf360c',
+        },
+        status: {
+          value: 'Active',
+          backgroundColor: '#a5d6a7',
+          foregroundColor: '#2e7d32',
+        },
       },
     ],
     columnDefs: sampleColumnDefs,
@@ -883,7 +1294,8 @@ export const TableWithExplicitColours: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Table cells can define `foregroundColor` and `backgroundColor` fields with any valid CSS color (including ones from our tokens)',
+        story:
+          'Table cells can define `foregroundColor` and `backgroundColor` fields with any valid CSS color (including ones from our tokens)',
       },
     },
   },
@@ -942,7 +1354,8 @@ export const TableWithSemanticColors: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Table cells can define a `semanticColor` field with one of the following values: DESTRUCTIVE, CAUTION, INFO, SUCCESS and WARNING',
+        story:
+          'Table cells can define a `semanticColor` field with one of the following values: DESTRUCTIVE, CAUTION, INFO, SUCCESS and WARNING',
       },
     },
   },