From 14ccd418f4d81d1e9fdbf0a1a752bda9d7a0a036 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 23 Oct 2025 10:07:10 +0000 Subject: [PATCH 1/4] Initial plan From 3b00890d0b7e9a3e9ee38e4a21b92fa10efe0820 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 23 Oct 2025 10:13:50 +0000 Subject: [PATCH 2/4] Fix checkbox column rendering when selection is not enabled Co-authored-by: py-bay <104859696+py-bay@users.noreply.github.com> --- src/components/Table/components/Table.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Table/components/Table.tsx b/src/components/Table/components/Table.tsx index fcb8524..c8ef285 100644 --- a/src/components/Table/components/Table.tsx +++ b/src/components/Table/components/Table.tsx @@ -208,7 +208,7 @@ const Table = ({ data={paginatedData} mobileConfig={config.mobileConfig} actions={config.actions} - selectable={config.selectable?.mode !== "none"} + selectable={!!config.selectable && config.selectable.mode !== "none"} selectedIds={selectedIds} onSelectItem={handleSelectItem} onRowClick={config.onRowClick} @@ -220,7 +220,7 @@ const Table = ({ columns={config.columns} actions={config.actions} sortable={config.sortable} - selectable={config.selectable?.mode !== "none"} + selectable={!!config.selectable && config.selectable.mode !== "none"} selectedIds={selectedIds} onSort={handleSort} getSortDirection={getSortDirection} From e0ea24f987082e679d07c4e20a9b2c1136deafd0 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 23 Oct 2025 10:17:19 +0000 Subject: [PATCH 3/4] Add examples demonstrating selection behavior Co-authored-by: py-bay <104859696+py-bay@users.noreply.github.com> --- .../Table/examples/NoSelectionExample.tsx | 86 +++++++++ .../examples/SelectionComparisonExample.tsx | 163 ++++++++++++++++++ 2 files changed, 249 insertions(+) create mode 100644 src/components/Table/examples/NoSelectionExample.tsx create mode 100644 src/components/Table/examples/SelectionComparisonExample.tsx diff --git a/src/components/Table/examples/NoSelectionExample.tsx b/src/components/Table/examples/NoSelectionExample.tsx new file mode 100644 index 0000000..04bb81d --- /dev/null +++ b/src/components/Table/examples/NoSelectionExample.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import { Table, createTableBuilder, type DataItem } from "../"; + +// Sample data type +interface Product extends DataItem { + id: number; + name: string; + category: string; + price: number; + stock: number; +} + +// Sample data +const products: Product[] = [ + { + id: 1, + name: "Laptop", + category: "Electronics", + price: 999.99, + stock: 15, + }, + { + id: 2, + name: "Mouse", + category: "Electronics", + price: 29.99, + stock: 50, + }, + { + id: 3, + name: "Keyboard", + category: "Electronics", + price: 79.99, + stock: 30, + }, + { + id: 4, + name: "Monitor", + category: "Electronics", + price: 299.99, + stock: 20, + }, +]; + +/** + * Example demonstrating a table WITHOUT selection enabled. + * This should NOT render checkbox columns. + */ +const NoSelectionExample: React.FC = () => { + // Create a table configuration WITHOUT calling enableSelection() + const tableConfig = createTableBuilder() + .addColumn("name", "Product Name", { sortable: true, width: "200px" }) + .addColumn("category", "Category", { sortable: true, width: "150px" }) + .addColumn("price", "Price", { + sortable: true, + width: "100px", + align: "right", + render: (value: number) => `$${value.toFixed(2)}`, + }) + .addColumn("stock", "Stock", { + sortable: true, + width: "100px", + align: "right", + }) + .enableSorting() + .build(); + + return ( +
+

Table Without Selection

+

+ This example demonstrates a table created without calling + enableSelection(). No checkbox column should be visible. +

+ + + + ); +}; + +export default NoSelectionExample; diff --git a/src/components/Table/examples/SelectionComparisonExample.tsx b/src/components/Table/examples/SelectionComparisonExample.tsx new file mode 100644 index 0000000..4cfc8a6 --- /dev/null +++ b/src/components/Table/examples/SelectionComparisonExample.tsx @@ -0,0 +1,163 @@ +import React, { useState } from "react"; +import { Box } from "@mui/joy"; +import { Table, createTableBuilder, type DataItem } from "../"; + +// Sample data type +interface Task extends DataItem { + id: number; + title: string; + status: "todo" | "in-progress" | "done"; + priority: "low" | "medium" | "high"; + assignee: string; +} + +// Sample data +const tasks: Task[] = [ + { + id: 1, + title: "Fix bug in authentication", + status: "in-progress", + priority: "high", + assignee: "John Doe", + }, + { + id: 2, + title: "Update documentation", + status: "todo", + priority: "medium", + assignee: "Jane Smith", + }, + { + id: 3, + title: "Review pull request #42", + status: "todo", + priority: "low", + assignee: "Bob Johnson", + }, + { + id: 4, + title: "Deploy to production", + status: "done", + priority: "high", + assignee: "Alice Williams", + }, +]; + +/** + * Example demonstrating the difference between tables with and without selection. + * This validates that the fix properly handles both scenarios. + */ +const SelectionComparisonExample: React.FC = () => { + const [selectedIds, setSelectedIds] = useState>(new Set()); + + // Table WITHOUT selection (should NOT show checkboxes) + const tableWithoutSelection = createTableBuilder() + .addColumn("title", "Task", { sortable: true, width: "250px" }) + .addColumn("status", "Status", { + sortable: true, + width: "120px", + render: (value: string) => ( + + {value} + + ), + }) + .addColumn("priority", "Priority", { sortable: true, width: "100px" }) + .addColumn("assignee", "Assignee", { sortable: true, width: "150px" }) + .enableSorting() + .build(); + + // Table WITH selection (should show checkboxes) + const tableWithSelection = createTableBuilder() + .addColumn("title", "Task", { sortable: true, width: "250px" }) + .addColumn("status", "Status", { + sortable: true, + width: "120px", + render: (value: string) => ( + + {value} + + ), + }) + .addColumn("priority", "Priority", { sortable: true, width: "100px" }) + .addColumn("assignee", "Assignee", { sortable: true, width: "150px" }) + .enableSelection("multiple", { + selectedIds, + onSelectionChange: setSelectedIds, + }) + .enableSorting() + .build(); + + return ( +
+

Selection Comparison Example

+

+ This example demonstrates the fix for the checkbox column rendering + issue. The first table does NOT call enableSelection() and should NOT + show checkboxes. The second table calls enableSelection() and SHOULD + show checkboxes. +

+ + +

Table WITHOUT Selection

+

+ ✓ No checkbox column should be visible +

+
+ + + +

Table WITH Selection

+

+ ✓ Checkbox column should be visible | Selected: {selectedIds.size}{" "} + tasks +

+
+ + + ); +}; + +export default SelectionComparisonExample; From 02dcf3be5e565ff89a8e236fcfb5302c5b91ec99 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 23 Oct 2025 10:20:56 +0000 Subject: [PATCH 4/4] Document selection configuration and fix in README Co-authored-by: py-bay <104859696+py-bay@users.noreply.github.com> --- src/components/Table/README.md | 40 ++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/components/Table/README.md b/src/components/Table/README.md index 3a5f167..50140a8 100644 --- a/src/components/Table/README.md +++ b/src/components/Table/README.md @@ -241,6 +241,46 @@ const AdvancedTable: React.FC = () => { | `placeholder?` | `string` | Input placeholder | | `defaultValue?` | `any` | Default filter value | +### SelectionConfig + +| Property | Type | Description | +| --------------------- | ------------------------------------ | -------------------------------------------- | +| `mode` | `'single' \| 'multiple' \| 'none'` | Selection mode | +| `selectedIds` | `Set` | Set of currently selected row IDs | +| `onSelectionChange` | `(selectedIds: Set) => void` | Callback when selection changes | +| `selectableRowIds?` | `Set` | Optional set of IDs that can be selected | +| `showSelectAll?` | `boolean` | Show select all checkbox (default: true) | + +**Important:** To enable row selection, you must explicitly configure the `selectable` property in your table config or call `.enableSelection()` when using the table builder. If `selectable` is not defined, no checkbox columns will be rendered. See the examples below for correct usage. + +#### Enabling Selection with Builder + +```tsx +const config = createTableBuilder() + .addColumn("name", "Name") + .addColumn("email", "Email") + .enableSelection("multiple", { + selectedIds, + onSelectionChange: setSelectedIds, + }) + .build(); +``` + +#### Table Without Selection + +If you don't call `.enableSelection()` or set `selectable` in the config, the table will **not** render checkbox columns: + +```tsx +// No selection - checkboxes will NOT be rendered +const config = createTableBuilder() + .addColumn("name", "Name") + .addColumn("email", "Email") + .enableSorting() + .build(); +``` + +For more examples, see `NoSelectionExample.tsx` and `SelectionComparisonExample.tsx` in the examples directory. + ## Hooks The Table component provides several custom hooks for advanced usage: