fix(BaseTable): pass getIsCustomRow, groupHeaderClassName and renderC…

…ustomRowContent into BaseRow (#66)

src/components/BaseTable/BaseTable.tsx

@@ -124,14 +124,17 @@ export const BaseTable = React.forwardRef(
             footerRowAttributes,
             footerRowClassName,
             getGroupTitle,
+            getIsCustomRow,
             getIsGroupHeaderRow,
+            groupHeaderClassName,
             headerAttributes,
             headerCellAttributes,
             headerCellClassName,
             headerClassName,
             headerRowAttributes,
             headerRowClassName,
             onRowClick,
+            renderCustomRowContent,
             renderGroupHeader,
             renderGroupHeaderRowContent,
             renderResizeHandle,
@@ -197,10 +200,13 @@ export const BaseTable = React.forwardRef(
                     cellClassName,
                     className: rowClassName,
                     getGroupTitle,
+                    getIsCustomRow,
                     getIsGroupHeaderRow,
+                    groupHeaderClassName,
                     attributes: rowAttributes,
                     cellAttributes,
                     onClick: onRowClick,
+                    renderCustomRowContent,
                     renderGroupHeader,
                     renderGroupHeaderRowContent,
                     row,

src/components/BaseTable/__stories__/BaseTable.stories.tsx

@@ -3,6 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import {BaseTable} from '../index';
 
 import {ColumnPinningStory} from './stories/ColumnPinningStory';
+import {CustomRowStory} from './stories/CustomRowStory';
 import {DefaultStory} from './stories/DefaultStory';
 import {EmptyContentStory} from './stories/EmptyContentStory';
 import {GroupingStory} from './stories/GroupingStory';
@@ -109,3 +110,7 @@ export const StickyHeader: StoryObj<typeof StickyHeaderStory> = {
 export const EmptyContent: StoryObj<typeof EmptyContentStory> = {
     render: EmptyContentStory,
 };
+
+export const CustomRow: StoryObj<typeof CustomRowStory> = {
+    render: CustomRowStory,
+};

src/components/BaseTable/__stories__/stories/CustomRowStory.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import type {ColumnDef, Row} from '@tanstack/react-table';
+
+import {useTable} from '../../../../hooks';
+import type {BaseTableProps} from '../../BaseTable';
+import {BaseTable} from '../../BaseTable';
+import {data} from '../constants/data';
+import type {Item} from '../types';
+
+interface CustomItem {
+    isCustom: boolean;
+}
+
+type ItemOrCustom = Item | CustomItem;
+
+const dataWithCustomRow: Array<ItemOrCustom> = [...data, {isCustom: true}];
+
+const getIsCustomRow = (row: Row<ItemOrCustom>) => {
+    return 'isCustom' in row.original && row.original.isCustom;
+};
+
+const renderCustomRowContent: BaseTableProps<ItemOrCustom>['renderCustomRowContent'] = ({Cell}) => {
+    return <Cell colSpan={2}>This is a custom row</Cell>;
+};
+
+const columns: ColumnDef<ItemOrCustom>[] = [
+    {accessorKey: 'name', header: 'Name', size: 150},
+    {accessorKey: 'age', header: 'Age', size: 150},
+];
+
+export const CustomRowStory = () => {
+    const table = useTable({
+        columns,
+        data: dataWithCustomRow,
+    });
+
+    return (
+        <BaseTable
+            table={table}
+            getIsCustomRow={getIsCustomRow}
+            renderCustomRowContent={renderCustomRowContent}
+        />
+    );
+};