Add table shown columns filter & fix row cells render.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-07-20 12:22:01 +02:00
parent dd8b0bde8a
commit 0efb60bb66
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
2 changed files with 42 additions and 8 deletions

View file

@ -1,5 +1,5 @@
import React, {useContext, useMemo} from "react";
import {AutoColumnContextProvider, ColumnKey} from "./Column";
import {ColumnContext, ColumnKey} from "./Column";
import {CellDefinition, CellInstance} from "./Cell";
import {Smartable, useTable} from "./Smartable";
import {Async, Promisable} from "@kernelui/core";
@ -69,15 +69,18 @@ export function RowCells()
// Get row data.
const row = useRow();
// Get table data.
const {columns} = useTable();
return (
Object.entries(row.cells).map(([columnKey, cellData]) => (
<AutoColumnContextProvider key={columnKey} columnKey={columnKey}>
<Async<CellDefinition> promise={cellData}>
Object.entries(columns).map(([columnKey, column]) => (
<ColumnContext.Provider key={columnKey} value={{ key: columnKey, column: column }}>
<Async<CellDefinition> promise={row.cells?.[columnKey] ?? { data: undefined }}>
{(cellDefinition) => (
<CellInstance cell={cellDefinition} />
)}
</Async>
</AutoColumnContextProvider>
</ColumnContext.Provider>
))
);
}

View file

@ -19,6 +19,11 @@ export interface SmartableProperties<CK extends ColumnKey>
*/
data: SmartableData<CK>;
/**
* When defined, only show the columns in the array.
*/
shownColumns?: CK[];
/**
* Default row element.
*/
@ -50,14 +55,40 @@ export function createSmartable<CK extends ColumnKey>({columns}: {
columns: Columns<CK>;
}): Smartable<CK>
{
/**
* Filter columns, given an array of shown columns.
* @param columns Full columns definition.
* @param shownColumns Shown columns list.
*/
const filterColumns = (columns: Columns<CK>, shownColumns: CK[]) => {
// Initialize the filtered columns object.
const filteredColumns = {...columns};
// Build an associative object of shown columns.
const shownColumnsMap = Object.fromEntries(shownColumns.map((shownColumn) => [shownColumn, true])) as Record<CK, boolean>;
for (const key of Object.keys(columns) as CK[])
{ // For each key, if it is not present in the shown columns
if (!shownColumnsMap?.[key])
// Delete all columns not present in the shown columns map.
delete filteredColumns[key];
}
// Return filtered columns.
return filteredColumns;
};
return {
Table: (props: SmartableProperties<CK>) => {
// Filter columns from the given property.
const filteredColumns = props.shownColumns ? filterColumns(columns, props.shownColumns) : columns;
return (
<TableContext.Provider value={{
columns: columns,
columns: filteredColumns,
...props,
}}>
<Instance columns={columns} {...props} />
<Instance columns={filteredColumns} {...props} />
</TableContext.Provider>
);
},
@ -87,5 +118,5 @@ const TableContext = React.createContext<TableContextData<ColumnKey>>(undefined)
*/
export function useTable<CK extends ColumnKey>(smartable?: Smartable<CK>): TableContextData<CK>
{
return useContext(TableContext);
return useContext(TableContext) as TableContextData<CK>;
}