From 28bf6d28d0e65980ed4a645b9fea2301d5b0baec Mon Sep 17 00:00:00 2001
From: Dmitry Artemov <d-artemov@yandex-team.ru>
Date: Fri, 4 Oct 2024 12:12:37 +0200
Subject: [PATCH] fix(BaseTable): pass getIsCustomRow, groupHeaderClassName and
 renderCustomRowContent into BaseRow (#66)

---
 src/components/BaseTable/BaseTable.tsx        |  6 +++
 .../__stories__/BaseTable.stories.tsx         |  5 +++
 .../__stories__/stories/CustomRowStory.tsx    | 45 +++++++++++++++++++
 3 files changed, 56 insertions(+)
 create mode 100644 src/components/BaseTable/__stories__/stories/CustomRowStory.tsx

diff --git a/src/components/BaseTable/BaseTable.tsx b/src/components/BaseTable/BaseTable.tsx
index f82f49f..3f5e1e7 100644
--- a/src/components/BaseTable/BaseTable.tsx
+++ b/src/components/BaseTable/BaseTable.tsx
@@ -124,7 +124,9 @@ export const BaseTable = React.forwardRef(
             footerRowAttributes,
             footerRowClassName,
             getGroupTitle,
+            getIsCustomRow,
             getIsGroupHeaderRow,
+            groupHeaderClassName,
             headerAttributes,
             headerCellAttributes,
             headerCellClassName,
@@ -132,6 +134,7 @@ export const BaseTable = React.forwardRef(
             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,
diff --git a/src/components/BaseTable/__stories__/BaseTable.stories.tsx b/src/components/BaseTable/__stories__/BaseTable.stories.tsx
index 604cbc8..3a0fc6c 100644
--- a/src/components/BaseTable/__stories__/BaseTable.stories.tsx
+++ b/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,
+};
diff --git a/src/components/BaseTable/__stories__/stories/CustomRowStory.tsx b/src/components/BaseTable/__stories__/stories/CustomRowStory.tsx
new file mode 100644
index 0000000..4445d51
--- /dev/null
+++ b/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}
+        />
+    );
+};