diff --git a/packages/react-components/src/components/Table/Table.mdx b/packages/react-components/src/components/Table/Table.mdx index 0ec716c8a..1e73e9aef 100644 --- a/packages/react-components/src/components/Table/Table.mdx +++ b/packages/react-components/src/components/Table/Table.mdx @@ -30,6 +30,7 @@ const columns: Column<(typeof data)[0]>[] = [ key: 'id', header: 'ID', sortable: true, + sortValue: (item: Data) => item.id, }, { key: 'name', @@ -41,6 +42,7 @@ const columns: Column<(typeof data)[0]>[] = [ key: 'age', header: 'Age', sortable: true, + sortValue: (item: Data) => item.age, }, { key: 'role', @@ -51,8 +53,6 @@ const columns: Column<(typeof data)[0]>[] = [ { key: 'action', header: 'Action', - sortable: false, - sortValue: undefined, }, ]; @@ -62,28 +62,28 @@ const data: Data[] = [ name: 'John Doe', age: 28, role: 'Developer', - action: , + action: , }, { id: 2, name: 'Jane Smith', age: 34, role: 'Designer', - action: , + action: , }, { id: 3, name: 'Alice Johnson', age: 42, role: 'Manager', - action: , + action: , }, { id: 4, name: 'Mike Williams', age: 25, role: 'Intern', - action: , + action: , }, ]; diff --git a/packages/react-components/src/components/Table/Table.stories.tsx b/packages/react-components/src/components/Table/Table.stories.tsx index 4b88794d5..bbadf5f80 100644 --- a/packages/react-components/src/components/Table/Table.stories.tsx +++ b/packages/react-components/src/components/Table/Table.stories.tsx @@ -49,10 +49,9 @@ const columns: Column<(typeof data)[0]>[] = [ { key: 'action', header: 'Action', - sortable: false, - sortValue: undefined, }, ]; + const data: Data[] = [ { id: 1, diff --git a/packages/react-components/src/components/Table/Table.tsx b/packages/react-components/src/components/Table/Table.tsx index c5455c10c..23ea4b5dc 100644 --- a/packages/react-components/src/components/Table/Table.tsx +++ b/packages/react-components/src/components/Table/Table.tsx @@ -19,7 +19,7 @@ export const Table = ({ data, columns, stripped, - size = 'small', + size = 'medium', pin, selectable, getRowId, diff --git a/packages/react-components/src/components/Table/TableBody.tsx b/packages/react-components/src/components/Table/TableBody.tsx index aaa3dcf72..52f544906 100644 --- a/packages/react-components/src/components/Table/TableBody.tsx +++ b/packages/react-components/src/components/Table/TableBody.tsx @@ -21,19 +21,23 @@ export const TableBody = ({ toggleRowSelection, }: TableBodyProps) => { return ( - - {data.map((row) => ( - - ))} + + {data.map((row) => { + const rowId = getRowId(row); + + return ( + + ); + })} ); }; diff --git a/packages/react-components/src/components/Table/TableHeader.tsx b/packages/react-components/src/components/Table/TableHeader.tsx index 4837de2a5..0cdf777ce 100644 --- a/packages/react-components/src/components/Table/TableHeader.tsx +++ b/packages/react-components/src/components/Table/TableHeader.tsx @@ -39,7 +39,11 @@ function renderSortIcon( sortable: boolean, hovered: boolean ) { - if (sortConfig.key === columnKey && sortConfig.direction !== SortOrder.None) { + if ( + sortConfig.key === columnKey && + sortConfig.direction !== SortOrder.None && + sortable + ) { return ( ({ })} onMouseEnter={() => setHoveredColumnIndex(index)} onMouseLeave={() => setHoveredColumnIndex(null)} + role="columnheader" > handleSort(column.key)} diff --git a/packages/react-components/src/components/Table/TableRow.tsx b/packages/react-components/src/components/Table/TableRow.tsx index 58f7cd105..8e020a494 100644 --- a/packages/react-components/src/components/Table/TableRow.tsx +++ b/packages/react-components/src/components/Table/TableRow.tsx @@ -31,7 +31,7 @@ export const TableRow = ({ return ( {selectable && ( - + toggleRowSelection(rowId)} @@ -41,7 +41,11 @@ export const TableRow = ({ {columns.map((column, index) => ( {row[column.key] as React.ReactNode} diff --git a/packages/react-components/src/components/Table/hooks.ts b/packages/react-components/src/components/Table/hooks.ts index 896584652..c58df2a86 100644 --- a/packages/react-components/src/components/Table/hooks.ts +++ b/packages/react-components/src/components/Table/hooks.ts @@ -27,7 +27,7 @@ export const useTable = ({ const toggleRowSelection = useCallback( (id: string | number) => { - const updatedSelectedRows = new Set(selectedRows); + const updatedSelectedRows = new Set(selectedRows || []); if (updatedSelectedRows.has(id)) { updatedSelectedRows.delete(id); } else {