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

package/dist/components/table/Table.stories.js

@@ -8,12 +8,12 @@ import { useState } 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 '../modal/modalManager/ModalManager';
 import { Modal } from '../modal/Modal';
 import { ModalUtils } from '../../utils/ModalUtils';
-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';
 const meta = {
     title: 'Components/Table',
     component: Table,
@@ -27,11 +27,56 @@ const meta = {
     },
 };
 const sampleData = [
-    { 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 = {
     editable: true,
@@ -45,18 +90,48 @@ const sampleColumnDefs = [
     {
         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 = [
     _jsx(Button, { variant: "primary", children: "Button 1" }, 0),
@@ -135,7 +210,7 @@ export const WithBulkActions = {
     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.",
             },
         },
     },
@@ -147,14 +222,17 @@ export const WithBulkActions = {
         headerContent: [
             _jsx(BulkActionsDropdown, { 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,
                     },
                 ] }, 0),
         ],
@@ -228,7 +306,7 @@ export const WithClientSidePagination = {
         defaultColDef,
         domLayout: 'autoHeight',
         pagination: true,
-        footerContent: _jsx(PaginationPanel, { availableSizes: [1, 2, 3, 4, 'All'], initialPageSize: 2 }),
+        footerContent: (_jsx(PaginationPanel, { availableSizes: [1, 2, 3, 4, 'All'], initialPageSize: 2 })),
     },
 };
 export const WithServerSidePagination = {
@@ -252,7 +330,10 @@ export const WithServerSidePagination = {
         const [currentPage, setCurrentPage] = useState(0);
         const [currentPageSize, setCurrentPageSize] = useState(initialPageSize);
         const splitRowDataBasedOnPageSize = (arr) => arr.length > currentPageSize
-            ? [arr.slice(0, currentPageSize), ...splitRowDataBasedOnPageSize(arr.slice(currentPageSize))]
+            ? [
+                arr.slice(0, currentPageSize),
+                ...splitRowDataBasedOnPageSize(arr.slice(currentPageSize)),
+            ]
             : [arr];
         const pageData = splitRowDataBasedOnPageSize(sampleData);
         const data = pageData[currentPage];
@@ -262,7 +343,8 @@ export const WithServerSidePagination = {
 const sampleColumnDefsWithButtonCellRenderer = [
     {
         headerName: 'Details',
-        children: [{
+        children: [
+            {
                 field: 'name',
                 headerTooltip: 'The name of the user',
                 cellRenderer: 'dsButtonCellRenderer',
@@ -270,23 +352,80 @@ const sampleColumnDefsWithButtonCellRenderer = [
                     supressCellFocusAndFocusFirstElement: true,
                 },
                 editable: false,
-            }, {
+            },
+            {
                 field: 'email',
                 headerTooltip: 'The email of the user',
-            }, {
+            },
+            {
                 field: 'role',
                 headerTooltip: 'The role of the user',
-            }],
+            },
+        ],
     },
     { field: 'status' },
 ];
 const handleClick = (e) => 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 = {
     args: {
@@ -306,13 +445,67 @@ export const WithButtonCellRendererThatOpensAModalWithModalManager = {
         domLayout: 'autoHeight',
     },
     render: () => {
-        const ModalContent = (name) => (_jsxs(_Fragment, { children: [_jsx(Modal.Header, { children: _jsxs(Modal.Title, { children: ["You've clicked on", ' ', name] }) }), _jsx(Modal.Body, { children: _jsx("p", { children: "Look at you go." }) })] }));
+        const ModalContent = (name) => (_jsxs(_Fragment, { children: [_jsx(Modal.Header, { children: _jsxs(Modal.Title, { children: ["You've clicked on", name] }) }), _jsx(Modal.Body, { children: _jsx("p", { children: "Look at you go." }) })] }));
         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' },
+            {
+                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 (_jsxs(_Fragment, { children: [_jsx(Table, { rowData: sampleData, columnDefs: sampleColumnDefsWithButtonCellRenderer, defaultColDef: defaultColDef, domLayout: "autoHeight" }), _jsx(ModalManager, {})] }));
     },
@@ -403,18 +596,25 @@ export const WithButtonCellRendererThatOpensAModalWithComposableModal = {
                 status: 'Active',
             },
         ];
-        return (_jsxs(_Fragment, { children: [_jsx(Table, { rowData: sampleData, columnDefs: sampleColumnDefsWithButtonCellRenderer, defaultColDef: defaultColDef, domLayout: "autoHeight" }), _jsxs(Modal, { open: showModal, closeHandler: () => setShowModal(false), children: [_jsx(Modal.Header, { children: _jsxs(Modal.Title, { children: ["You've clicked on", ' ', sampleData.find(person => person.id === activePersonId)?.name.children] }) }), _jsx(Modal.Body, { children: _jsx("p", { children: "Look at you go." }) }), _jsxs(Modal.Footer, { children: [_jsx(Button, { variant: "tertiary", onClick: () => setShowModal(false), children: "Close" }), _jsx(Button, { variant: "primary", onClick: () => setShowModal(false), children: "Primary Action" })] })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Table, { rowData: sampleData, columnDefs: sampleColumnDefsWithButtonCellRenderer, defaultColDef: defaultColDef, domLayout: "autoHeight" }), _jsxs(Modal, { open: showModal, closeHandler: () => setShowModal(false), children: [_jsx(Modal.Header, { children: _jsxs(Modal.Title, { children: ["You've clicked on", ' ', sampleData.find(person => person.id === activePersonId)
+                                        ?.name.children] }) }), _jsx(Modal.Body, { children: _jsx("p", { children: "Look at you go." }) }), _jsxs(Modal.Footer, { children: [_jsx(Button, { variant: "tertiary", onClick: () => setShowModal(false), children: "Close" }), _jsx(Button, { variant: "primary", onClick: () => setShowModal(false), children: "Primary Action" })] })] })] }));
     },
 };
 export const WithInlineTextCellRenderer = {
     args: {
         rowData: sampleData,
-        columnDefs: [{ field: 'name', cellRenderer: 'dsInlineTextCellRenderer', cellRendererParams: {
+        columnDefs: [
+            {
+                field: 'name',
+                cellRenderer: 'dsInlineTextCellRenderer',
+                cellRendererParams: {
                     supressCellFocusAndFocusFirstElement: true,
                     suppressCount: true,
                     suppressDoubleClickExpand: true,
                     suppressEnterExpand: true,
-                } }],
+                },
+            },
+        ],
         defaultColDef,
         domLayout: 'autoHeight',
     },
@@ -424,7 +624,10 @@ export const WithTreeData = {
         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' },
         ],
@@ -445,17 +648,47 @@ export const WithTreeData = {
                 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',
+                    },
                 ],
             },
         ],
@@ -464,19 +697,23 @@ export const WithTreeData = {
 const colDefsWithValidation = [
     {
         headerName: 'Details',
-        children: [{
+        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' },
 ];
@@ -500,7 +737,8 @@ export const WithValidation = {
 const colDefsWithValidationClasses = [
     {
         headerName: 'Details',
-        children: [{
+        children: [
+            {
                 field: 'name',
                 headerTooltip: 'The name of the user',
                 cellEditorParams: {
@@ -509,13 +747,16 @@ const colDefsWithValidationClasses = [
                 cellClassRules: {
                     'ds-table__cell--invalid': params => params.value?.value?.length > 10,
                 },
-            }, {
+            },
+            {
                 field: 'email',
                 headerTooltip: 'The email of the user',
-            }, {
+            },
+            {
                 field: 'role',
                 headerTooltip: 'The role of the user',
-            }],
+            },
+        ],
     },
     { field: 'status' },
 ];
@@ -556,7 +797,13 @@ const marksheetTidyTableColumnDefs = [
         headerName: 'Assessment Component',
         field: 'assessmentComponent',
         cellRenderer: 'dsSelectDropdownCellRenderer',
-        cellRendererParams: { options: assessmentComponentOptions, placeholder: 'Select' },
+        cellRendererParams: (params) => {
+            return {
+                options: assessmentComponentOptions,
+                placeholder: 'Select',
+                hasError: params.node.data.assessmentComponent === 'comp-maths',
+            };
+        },
         editable: false,
     },
     {
@@ -588,27 +835,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,
+            },
         ],
     },
 ];
@@ -651,38 +961,98 @@ export const TableWithExplicitColours = {
         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,