Add table shown columns filter & fix row cells render.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
dd8b0bde8a
commit
0efb60bb66
2 changed files with 42 additions and 8 deletions
|
@ -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>
|
||||||
))
|
))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue