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 = { export const EmptyContent: StoryObj = { render: EmptyContentStory, }; + +export const CustomRow: StoryObj = { + 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 = [...data, {isCustom: true}]; + +const getIsCustomRow = (row: Row) => { + return 'isCustom' in row.original && row.original.isCustom; +}; + +const renderCustomRowContent: BaseTableProps['renderCustomRowContent'] = ({Cell}) => { + return This is a custom row; +}; + +const columns: ColumnDef[] = [ + {accessorKey: 'name', header: 'Name', size: 150}, + {accessorKey: 'age', header: 'Age', size: 150}, +]; + +export const CustomRowStory = () => { + const table = useTable({ + columns, + data: dataWithCustomRow, + }); + + return ( + + ); +};