feat: INITIATE-3491 Data table Design fixes

.changeset/violet-impalas-walk.md

@@ -0,0 +1,6 @@
+---
+'@project44-manifest/react': patch
+'storybook-manifest': patch
+---
+
+Added new prop autoResetExpanded, Added new prop getSubRows, Added class for child rows.

packages/react/src/components/DataTable/DataTable.tsx

@@ -62,6 +62,8 @@ export function DataTable<TData extends RowData>(props: DataTableProps<TData>) {
     onRowSelectionChange,
     onSortingChange,
     onScroll,
+    autoResetExpanded,
+    getSubRows = (row: Row<TData>) => row?.subRows as TData[],
     ...other
   } = props;
 
@@ -138,7 +140,7 @@ export function DataTable<TData extends RowData>(props: DataTableProps<TData>) {
     getExpandedRowModel: getExpandedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    getSubRows: (row: Row<TData>) => row?.subRows as TData[],
+    getSubRows,
     initialState,
     isLoading,
     manualExpanding,
@@ -154,6 +156,13 @@ export function DataTable<TData extends RowData>(props: DataTableProps<TData>) {
     ...(manualPagination && { onPaginationChange }),
     ...(manualSorting && { onSortingChange }),
   } as TableOptions<TData>) as DataTable<TData>;
+
+  React.useEffect(() => {
+    if (autoResetExpanded) {
+      table.resetExpanded();
+    }
+  }, [data, autoResetExpanded, table]);
+
   return (
     <StyledDataTable className="manifest-data-table" {...other}>
       <div

packages/react/src/components/DataTable/DataTable.types.ts

@@ -165,6 +165,10 @@ export interface DataTableProps<TData extends RowData> {
    * Whether the sorting state for the table is controlled.
    */
   manualSorting?: boolean;
+  /**
+   * Enable this setting to automatically reset the expanded state of the table when expanding state changes.
+   */
+  autoResetExpanded?: boolean;
   /**
    * A total pageCount of the table (controlled).
    */
@@ -223,6 +227,11 @@ export interface DataTableProps<TData extends RowData> {
    *  Handler that is invoked on scroll event on table container
    */
   onScroll?: (event: React.SyntheticEvent) => void;
+  /**
+   * Optional function used to access the sub rows for the table .
+   * @default * (row: Row<TData>) => row?.subRows as TData[]
+   */
+  getSubRows?: (Row: Row<TData>) => TData[];
 }
 
 export interface FooterPropsType {

packages/react/src/components/DataTable/components/DataTableBody/DataTableBody.tsx

@@ -8,7 +8,10 @@ export function DataTableBody<TData extends RowData>(props: DataTableBodyProps<T
   return (
     <tbody className="manifest-table__body">
       {table.getRowModel().rows.map((row) => (
-        <tr key={row.id} className="manifest-table__row">
+        <tr
+          key={row.id}
+          className={`manifest-table__row  ${row.depth > 0 ? 'manifest-table__child-row' : ''}`}
+        >
           {row.getVisibleCells().map((cell) => (
             <DataTableCell key={cell.id} cell={cell} table={table} />
           ))}

packages/react/src/components/DataTable/story/DataTable.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
+import React, { useState } from 'react';
 import { faker } from '@faker-js/faker';
 import { ClipboardWithCheck, Clock } from '@project44-manifest/react-icons';
 import { RowSelectionState } from '@tanstack/react-table';
@@ -358,6 +358,80 @@ export const RowExpanding = () => {
   return <DataTable enableExpanding columns={columns} data={data} />;
 };
 
+export const RowExpandingReset = () => {
+  interface Person {
+    firstName: string;
+    lastName: string;
+    age: number;
+    address: string;
+    phoneNumber: string;
+  }
+  const columns: DataTableColumnDef<Person>[] = [
+    {
+      header: 'First Name',
+      accessorKey: 'firstName',
+    },
+    {
+      header: 'Last Name',
+      accessorKey: 'lastName',
+    },
+    {
+      header: 'Age',
+      accessorKey: 'age',
+    },
+    {
+      header: 'Address',
+      accessorKey: 'address',
+    },
+    {
+      header: 'Phone Number',
+      accessorKey: 'phoneNumber',
+    },
+  ];
+  const [data, setData] = useState(
+    [...Array.from({ length: 5 })].map(() => ({
+      firstName: faker.name.firstName(),
+      lastName: faker.name.lastName(),
+      age: faker.datatype.number(80),
+      address: faker.address.streetAddress(),
+      phoneNumber: faker.phone.number(),
+      subRows: [...Array.from({ length: faker.datatype.number(4) })].map(() => ({
+        firstName: faker.name.firstName(),
+        lastName: faker.name.lastName(),
+        age: faker.datatype.number(80),
+        address: faker.address.streetAddress(),
+        phoneNumber: faker.phone.number(),
+      })),
+    })),
+  );
+
+  const resetData = () => {
+    setData(
+      [...Array.from({ length: 5 })].map(() => ({
+        firstName: faker.name.firstName(),
+        lastName: faker.name.lastName(),
+        age: faker.datatype.number(80),
+        address: faker.address.streetAddress(),
+        phoneNumber: faker.phone.number(),
+        subRows: [...Array.from({ length: faker.datatype.number(4) })].map(() => ({
+          firstName: faker.name.firstName(),
+          lastName: faker.name.lastName(),
+          age: faker.datatype.number(80),
+          address: faker.address.streetAddress(),
+          phoneNumber: faker.phone.number(),
+        })),
+      })),
+    );
+  };
+
+  return (
+    <>
+      <button onClick={resetData}> reset </button>
+      <DataTable autoResetExpanded enableExpanding columns={columns} data={data} />
+    </>
+  );
+};
+
 export const RowExpandingAndSelection = () => {
   interface Person {
     firstName: string;