Table stateless selection: Support key property that's not part of th…

…e table headers (#6788)
public-ui · Sep 6, 2024 · b35a4ce · b35a4ce
2 parents 2522537 + f8252a2
commit b35a4ce
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 21 deletions.
diff --git a/packages/components/src/components/table-stateless/component.tsx b/packages/components/src/components/table-stateless/component.tsx
@@ -382,13 +382,13 @@ export class KolTableStateless implements TableStatelessAPI {
 		const selection = this.state._selection;
 		if (!selection) return '';
 		const keyPropertyName = selection.keyPropertyName ?? 'id';
-		const keyCell = row.find((cell) => cell.key === keyPropertyName);
+		const firstCellData = row[0]?.data;
 
-		if (!keyCell) return '';
+		if (!firstCellData) return '';
+		const keyProperty = firstCellData[keyPropertyName] as string;
 		const isMultiple = selection.multiple || selection.multiple === undefined;
-		const keyProperty = (keyCell?.data as KoliBriTableDataType)[keyPropertyName] as string;
 		const selected = selection?.selectedKeys?.includes(keyProperty);
-		const label = selection.label(keyCell.data as KoliBriTableDataType);
+		const label = selection.label(firstCellData);
 		const props = {
 			name: 'selection',
 			checked: selected,

diff --git a/packages/samples/react/src/components/table/stateful-with-selection.tsx b/packages/samples/react/src/components/table/stateful-with-selection.tsx
@@ -5,8 +5,8 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -15,8 +15,8 @@ export const TableStatefulWithSelection: FC = () => {
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
-		selectedKeys: selectedValue ? selectedValue.map((element) => element.id) : [],
-		keyPropertyName: 'id',
+		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : [],
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);

diff --git a/packages/samples/react/src/components/table/stateful-with-single-selection.tsx b/packages/samples/react/src/components/table/stateful-with-single-selection.tsx
@@ -5,8 +5,8 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 
 type Data = (typeof DATA)[0];
@@ -17,8 +17,8 @@ export const TableStatefulWithSingleSelection: FC = () => {
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		multiple: false,
-		selectedKeys: selectedValue ? [selectedValue.id] : [],
-		keyPropertyName: 'id',
+		selectedKeys: selectedValue ? [selectedValue.internalIdentifier] : [],
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);

diff --git a/packages/samples/react/src/components/table/stateless-with-selection.tsx b/packages/samples/react/src/components/table/stateless-with-selection.tsx
@@ -5,25 +5,24 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 type Data = (typeof DATA)[0];
 
 export const TableStatelessWithSelection: FC = () => {
-	const [selectedKeys, setSelectedKeys] = useState(['1002']);
+	const [selectedKeys, setSelectedKeys] = useState(['AAA1002']);
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		selectedKeys,
-		keyPropertyName: 'id',
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
 
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
-		setSelectedKeys(selection);
 	};
 	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
 		console.log('Selection change via callback', selection);

diff --git a/packages/samples/react/src/components/table/stateless-with-single-selection.tsx b/packages/samples/react/src/components/table/stateless-with-single-selection.tsx
@@ -5,8 +5,8 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -17,14 +17,13 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		multiple: false,
 		selectedKeys,
-		keyPropertyName: 'id',
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
 
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
-		setSelectedKeys(selection);
 	};
 	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
 		console.log('Selection change via callback', selection);