Add table shown columns filter & fix row cells render.

src/Smartable/Row.tsx

@@ -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>
 		))
 	);
 }

src/Smartable/Smartable.tsx

@@ -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>;
 }