Implement #28

package/DataTable.props.ts

@@ -7,9 +7,15 @@ import type {
   MantineTheme,
   Sx,
   TableProps,
+  CollapseProps,
 } from '@mantine/core';
 import type { CSSProperties, ReactNode } from 'react';
 
+export type ExpandedRowCollapseProps = Pick<
+  CollapseProps,
+  'animateOpacity' | 'transitionDuration' | 'transitionTimingFunction'
+>;
+
 export type DataTableColumnTextAlignment = 'left' | 'center' | 'right';
 export type DataTableVerticalAlignment = 'top' | 'center' | 'bottom';
 
@@ -382,6 +388,42 @@ export type DataTableProps<T> = {
      */
     items: (record: T) => DataTableContextMenuItemProps[];
   };
+
+  /**
+   * Defines a custom component to render beneath the related record's row
+   */
+  expandedRow?: {
+    /**
+     * Defines when rows should expand; defaults to `click`
+     * May pass a custom function that receives the current record;
+     * if true, that row will be expanded
+     */
+    expandRowOn?: 'click' | 'always' | ((record: T) => boolean);
+
+    /**
+     * Defined if multiple rows are allowed to be expanded at the same time; defaults to `false`
+     */
+    expandMultiple?: boolean;
+
+    /**
+     * Defines the record that will be expanded when the table is first loaded;
+     * defaults to `undefined`;
+     * does nothing if `expandRowOn === 'always'`
+     */
+    expandFirst?: unknown;
+
+    /**
+     * Pass additional props to the Mantine Collapse component wrapping the custom component;
+     * does not accept the `children`, `in`, or `onTransitionEnd` properties
+     */
+    collapseProps?: ExpandedRowCollapseProps;
+
+    /**
+     * Custom component to be rendered;
+     * accepts the current record
+     */
+    item: (record: T) => ReactNode;
+  };
 } & Pick<TableProps, 'striped' | 'highlightOnHover' | 'horizontalSpacing' | 'verticalSpacing' | 'fontSize'> &
   Omit<DefaultProps<'root' | 'header' | 'pagination', CSSProperties>, 'unstyled'> &
   DataTableOuterBorderProps &

package/DataTable.tsx

@@ -122,6 +122,7 @@ export default function DataTable<T>({
   striped,
   onRowClick,
   rowContextMenu,
+  expandedRow,
   sx,
   className,
   classNames,
@@ -187,7 +188,7 @@ export default function DataTable<T>({
   };
 
   /**
-   * React hooks linting rule would reccomend to also include the `useDobouncedState` setters
+   * React hooks linting rule would recommend to also include the `useDobouncedState` setters
    * (setScrolledToBottom, setScrolledToLeft, setScrolledToRight, setScrolledToTop) in the effect
    * dependecies, but it looks like there's actually no need to.
    */
@@ -206,6 +207,34 @@ export default function DataTable<T>({
     onPageChange!(page);
   };
 
+  const { expandRowOn = 'click', expandMultiple = false, expandFirst, collapseProps } = expandedRow ?? {};
+
+  const initialExpandedRows = expandRowOn === 'always' ? [] : [expandFirst];
+  const [expandedRowIds, setExpandedRowIds] = useState<unknown[]>(initialExpandedRows);
+  const changeExpandedRowIds = expandMultiple
+    ? (recordID: unknown, isExpanded: boolean) => {
+        isExpanded
+          ? setExpandedRowIds(expandedRowIds.filter((currentID) => currentID !== recordID))
+          : setExpandedRowIds([...(expandedRowIds as unknown[]), recordID]);
+      }
+    : (recordID: unknown, isExpanded: boolean) => {
+        isExpanded ? setExpandedRowIds([]) : setExpandedRowIds([recordID]);
+      };
+
+  useEffect(() => {
+    if (typeof expandRowOn === 'function' && records) {
+      const rowIds: unknown[] = [];
+      for (const record of records) {
+        const result = expandRowOn(record);
+        if (result) {
+          rowIds.push(getValueAtPath(record, idAccessor));
+          if (!expandMultiple) break;
+        }
+      }
+      setExpandedRowIds(rowIds);
+    }
+  }, [records, idAccessor, expandRowOn, expandMultiple]);
+
   const recordsLength = records?.length;
   const recordIds = records?.map((record) => getValueAtPath(record, idAccessor));
   const selectedRecordIds = selectedRecords?.map((record) => getValueAtPath(record, idAccessor));
@@ -290,6 +319,7 @@ export default function DataTable<T>({
               records.map((record, recordIndex) => {
                 const recordId = getValueAtPath(record, idAccessor);
                 const selected = selectedRecordIds?.includes(recordId) || false;
+                const isExpanded = expandRowOn === 'always' ? true : expandedRowIds.includes(recordId);
 
                 let showContextMenuOnClick = false;
                 let showContextMenuOnRightClick = false;
@@ -340,8 +370,19 @@ export default function DataTable<T>({
                     }
                     onClick={
                       showContextMenuOnClick
-                        ? (e) => {
-                            setRowContextMenuInfo({ top: e.clientY, left: e.clientX, record });
+                        ? expandRowOn === 'click'
+                          ? (e) => {
+                              setRowContextMenuInfo({ top: e.clientY, left: e.clientX, record });
+                              changeExpandedRowIds(recordId, isExpanded);
+                              onRowClick?.(record);
+                            }
+                          : (e) => {
+                              setRowContextMenuInfo({ top: e.clientY, left: e.clientX, record });
+                              onRowClick?.(record);
+                            }
+                        : expandRowOn === 'click'
+                        ? () => {
+                            changeExpandedRowIds(recordId, isExpanded);
                             onRowClick?.(record);
                           }
                         : onRowClick
@@ -362,6 +403,9 @@ export default function DataTable<T>({
                       rowContextMenuInfo ? getValueAtPath(rowContextMenuInfo.record, idAccessor) === recordId : false
                     }
                     leftShadowVisible={selectionVisibleAndNotScrolledToLeft}
+                    expandedRow={expandedRow?.item}
+                    isExpanded={isExpanded}
+                    collapseProps={collapseProps ?? {}}
                   />
                 );
               })

package/DataTableRow.tsx

@@ -1,6 +1,6 @@
-import { Checkbox, createStyles } from '@mantine/core';
+import { Checkbox, createStyles, Collapse } from '@mantine/core';
 import { ChangeEventHandler, MouseEventHandler } from 'react';
-import { DataTableColumn } from './DataTable.props';
+import { DataTableColumn, ExpandedRowCollapseProps } from './DataTable.props';
 import DataTableRowCell from './DataTableRowCell';
 
 const useStyles = createStyles((theme) => {
@@ -65,10 +65,16 @@ const useStyles = createStyles((theme) => {
         },
       },
     },
+    expandedRow: {
+      padding: '0 !important',
+    },
+    expandedRow__collapsed: {
+      border: '0 !important',
+    },
   };
 });
 
-type DataTableRowProps<T> = {
+interface DataTableRowBaseProps<T> {
   record: T;
   columns: DataTableColumn<T>[];
   selectionVisible: boolean;
@@ -78,9 +84,77 @@ type DataTableRowProps<T> = {
   onContextMenu: MouseEventHandler<HTMLTableRowElement> | undefined;
   contextMenuVisible: boolean;
   leftShadowVisible: boolean;
-};
+}
+
+interface DataTableRowChildProps<T> extends DataTableRowBaseProps<T> {
+  styles: ReturnType<typeof useStyles>;
+}
+
+interface DataTableRowParentProps<T> extends DataTableRowBaseProps<T> {
+  expandedRow: ((record: T) => React.ReactNode) | undefined;
+  isExpanded: boolean;
+  collapseProps: ExpandedRowCollapseProps;
+}
+
+export default function DataTableRowParent<T>({
+  record,
+  columns,
+  selectionVisible,
+  selectionChecked,
+  onSelectionChange,
+  onClick,
+  onContextMenu,
+  contextMenuVisible,
+  leftShadowVisible,
+  expandedRow,
+  isExpanded,
+  collapseProps,
+}: DataTableRowParentProps<T>) {
+  const styles = useStyles();
+  const { cx, classes } = styles;
+
+  const dataTableRow = DataTableRow({
+    record,
+    columns,
+    selectionVisible,
+    selectionChecked,
+    onSelectionChange,
+    onClick,
+    onContextMenu,
+    contextMenuVisible,
+    leftShadowVisible,
+    styles,
+  });
+
+  if (expandedRow) {
+    const { animateOpacity, transitionDuration, transitionTimingFunction } = collapseProps;
+    const columnCount = selectionVisible ? columns.length + 1 : columns.length;
+    return (
+      <>
+        {dataTableRow}
+        <tr>
+          <td
+            colSpan={columnCount}
+            className={cx(classes.expandedRow, { [classes.expandedRow__collapsed]: !isExpanded })}
+          >
+            <Collapse
+              in={isExpanded}
+              animateOpacity={animateOpacity}
+              transitionDuration={transitionDuration}
+              transitionTimingFunction={transitionTimingFunction}
+            >
+              {expandedRow(record)}
+            </Collapse>
+          </td>
+        </tr>
+      </>
+    );
+  } else {
+    return dataTableRow;
+  }
+}
 
-export default function DataTableRow<T>({
+function DataTableRow<T>({
   record,
   columns,
   selectionVisible,
@@ -90,8 +164,9 @@ export default function DataTableRow<T>({
   onContextMenu,
   contextMenuVisible,
   leftShadowVisible,
-}: DataTableRowProps<T>) {
-  const { cx, classes } = useStyles();
+  styles,
+}: DataTableRowChildProps<T>) {
+  const { cx, classes } = styles;
 
   return (
     <tr