feat: add possibility to pass external columns (#2187)

Author: astandrik

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<ResizeableDataTableProps<KeyValueRow>, '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 (
         <ResizeableDataTable