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

View file

@ -19,6 +19,11 @@ export interface SmartableProperties<CK extends ColumnKey>
*/ */
data: SmartableData<CK>; data: SmartableData<CK>;
/**
* When defined, only show the columns in the array.
*/
shownColumns?: CK[];
/** /**
* Default row element. * Default row element.
*/ */
@ -50,14 +55,40 @@ export function createSmartable<CK extends ColumnKey>({columns}: {
columns: Columns<CK>; columns: Columns<CK>;
}): Smartable<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 { return {
Table: (props: SmartableProperties<CK>) => { Table: (props: SmartableProperties<CK>) => {
// Filter columns from the given property.
const filteredColumns = props.shownColumns ? filterColumns(columns, props.shownColumns) : columns;
return ( return (
<TableContext.Provider value={{ <TableContext.Provider value={{
columns: columns, columns: filteredColumns,
...props, ...props,
}}> }}>
<Instance columns={columns} {...props} /> <Instance columns={filteredColumns} {...props} />
</TableContext.Provider> </TableContext.Provider>
); );
}, },
@ -87,5 +118,5 @@ const TableContext = React.createContext<TableContextData<ColumnKey>>(undefined)
*/ */
export function useTable<CK extends ColumnKey>(smartable?: Smartable<CK>): TableContextData<CK> export function useTable<CK extends ColumnKey>(smartable?: Smartable<CK>): TableContextData<CK>
{ {
return useContext(TableContext); return useContext(TableContext) as TableContextData<CK>;
} }