diff --git a/src/components/ShardsTable/ShardsTable.tsx b/src/components/ShardsTable/ShardsTable.tsx index ebf0e15a99..0bbf9ff66e 100644 --- a/src/components/ShardsTable/ShardsTable.tsx +++ b/src/components/ShardsTable/ShardsTable.tsx @@ -7,29 +7,39 @@ import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable'; import {shardsColumnIdToGetColumn} from './columns'; import type {TopShardsColumnId} from './constants'; import {TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, isSortableTopShardsColumn} from './constants'; +import type {ShardsColumn} from './types'; export interface ShardsTableProps extends Omit, 'columnsWidthLSKey' | 'columns'> { columnsIds: TopShardsColumnId[]; database: string; + columns?: ShardsColumn[]; schemaPath?: string; } -export function ShardsTable({columnsIds, schemaPath, database, ...props}: ShardsTableProps) { - const columns = React.useMemo( - () => - columnsIds - .filter((id) => id in shardsColumnIdToGetColumn) - .map((id) => { - const column = shardsColumnIdToGetColumn[id]({database, schemaPath}); +export function ShardsTable({ + columnsIds, + schemaPath, + database, + columns: propsColumns, + ...props +}: ShardsTableProps) { + const columns = React.useMemo(() => { + if (propsColumns) { + return propsColumns; + } - return { - ...column, - sortable: isSortableTopShardsColumn(column.name), - }; - }), - [columnsIds, database, schemaPath], - ); + return columnsIds + .filter((id) => id in shardsColumnIdToGetColumn) + .map((id) => { + const column = shardsColumnIdToGetColumn[id]({database, schemaPath}); + + return { + ...column, + sortable: isSortableTopShardsColumn(column.name), + }; + }); + }, [columnsIds, database, propsColumns, schemaPath]); return (