diff --git a/packages/core/src/renderer/components/table/table-state.injectable.tsx b/packages/core/src/renderer/components/table/table-state.injectable.tsx index e36f96d023..ee38d81bdc 100644 --- a/packages/core/src/renderer/components/table/table-state.injectable.tsx +++ b/packages/core/src/renderer/components/table/table-state.injectable.tsx @@ -15,7 +15,27 @@ import type { TableDataContextValue } from "./table-data-context"; import type { CreateTableState } from "@k8slens/table"; import { createTableStateInjectionToken } from "@k8slens/table"; -type TableDataColumn = object; +interface TableDataRow { + id: string; + data: DataItem; + index?: number; + className?: string; +} + +interface TableDataColumn { + id: string; + title: React.ReactNode; + className?: string; + style?: React.CSSProperties; + size?: string; + minSize?: number; + resizable?: boolean; + draggable?: boolean; + sortable?: boolean; + renderValue?: (row: TableDataRow) => React.ReactNode; + sortValue?: (row: TableDataRow, col: TableDataColumn) => string | number; + searchValue?: (row: TableDataRow) => string; +} export function createLensTableState({ tableId, @@ -33,8 +53,7 @@ export function createLensTableState({ }: TableDataContextValue, createState: CreateTableState) { const headers = renderTableHeader as Required[]; - - let headingColumns: TableDataColumn[] = headers.map( + let headingColumns: TableDataColumn[] = headers.map( ({ id: columnId, className, title }, index) => ({ id: columnId ?? className, className, @@ -42,7 +61,7 @@ export function createLensTableState({ sortable: !!columnId, draggable: !!columnId, // e.g. warning-icon column in pods title, - renderValue(row: any, col: any) { + renderValue(row: TableDataRow) { const content = renderTableContents?.(row.data)[index] ?? contextColumns @@ -57,13 +76,13 @@ export function createLensTableState({ return
{title}
; } }, - sortValue(row: any, col: any) { + sortValue(row: TableDataRow, col: any) { return sortingCallbacks?.[col.id]?.(row.data) as string; }, }), ); - const checkboxColumn: TableDataColumn = { + const checkboxColumn: TableDataColumn = { id: "checkbox", className: "checkbox", draggable: false, @@ -84,7 +103,7 @@ export function createLensTableState({
{ + onChange={action(() => { if (tableState.selectedRowsId.has(rowId)) { tableState.selectedRowsId.delete(rowId); } else { @@ -97,7 +116,7 @@ export function createLensTableState({ }, }; - const menuColumn: TableDataColumn = { + const menuColumn: TableDataColumn = { id: "menu", className: "menu", resizable: false, @@ -118,7 +137,7 @@ export function createLensTableState({ { + onChange={action(() => { if (tableState.hiddenColumns.has(columnId)) { tableState.hiddenColumns.delete(columnId); } else { @@ -131,7 +150,7 @@ export function createLensTableState({ ); }, - renderValue(row: any, col: any) { + renderValue(row: any) { return (
{renderItemMenu?.(row.data, store)}
);