@jielga/tmdatagrid 2.0.0-beta.9 → 2.0.0

package/skills/testing-editing/SKILL.md

@@ -0,0 +1,240 @@
+---
+name: testing-editing
+description: >
+  Test TMDataGrid editing flows from Playwright: adding a row through the entry
+  row, where its temporary id (__new__1) goes at commit and at save, finding an
+  added row when the grid does not know the id the app gave it, asserting a
+  failed validation on an entry row, cell and row edits, deletions, and the
+  draft store (data-new, data-draft, data-dirty, data-deleted, row-state,
+  save-all and data-draft-count). Load when writing or fixing a test that adds,
+  edits, deletes or saves rows, or when a locator for a new row stops resolving
+  after the row is committed.
+metadata:
+  type: core
+  library: '@jielga/tmdatagrid'
+  library_version: '2.0.0'
+sources:
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/testing.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/editing.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/docs/draft-store.md'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/components/TMDataGridEntryRows.tsx'
+  - 'Jielga/TMDataGrid:packages/tmdatagrid/src/components/TMDataGridEditColumn.tsx'
+---
+
+# TMDataGrid - Testing editing
+
+Builds on the `testing` skill: parts are `[data-dg-part]`, coordinates are
+`[data-row-id]` / `[data-column-id]`, and `DataGrid` is its page object, built
+with `DataGrid.byTestId(page, "orders")` or `new DataGrid(rootLocator)`.
+
+## The life of an added row
+
+`edit.addRow()` opens an entry row keyed by a temporary id. What happens at ✓
+depends on `editing.draft`, and that decides what a test can hold on to:
+
+| Step | Without `draft` | With `draft: true` |
+| --- | --- | --- |
+| `addRow()` | `[data-dg-part="entry-row"][data-row-id="__new__1"]`; editors are `[data-dg-part="editor"][data-row-id="__new__1"][data-column-id="..."]` | Same |
+| ✓ fails validation | Entry row stays; failing cells carry `data-invalid="true"` | Same |
+| ✓ (`confirm-new-row`) | **Entry row removed, temp id gone.** `onRowAdd({ tempId, value })` runs in the app; the row exists again only when the app puts it in `data`, under the id the app's `getRowId` returns | Becomes a body row **still keyed by the temp id**: `[data-dg-part="row"][data-row-id="__new__1"][data-new="true"][data-draft="true"]`, lane shows `[data-dg-part="row-state"][data-state="new"]`, `[data-dg-part="save-all"]` counts it in `data-draft-count` |
+| Save (`save-all`) | - | As ✓ without `draft`: temp id gone, row comes back through `data` under the app's id |
+| `newRowsSticky: true` | - | The committed row stays an `entry-row` with `data-committed="true"`, outside `data-dg-row-count`, until Save |
+
+The grid never learns the id the app assigns (a database id, a negative
+counter, a uuid - whatever `onRowAdd` or `onSaveDrafts` does). The temp id →
+real id mapping does not exist anywhere in the DOM.
+
+## The rule: find an added row by content, not by id
+
+Once `onRowAdd` or `saveDrafts` has run, the only thing the test knows about
+the row is what it typed. Narrow the grid to a value unique to that row, assert
+that exactly one row is left, read that row's cells:
+
+```ts
+async expectRowAdded(uniqueValue: string, cells: Record<string, string>) {
+  await this.search(uniqueValue);   // or filterBy on a column when there is no quick search
+  await this.expectRowCount(1);     // retries until the app has put the row in data
+  const row = this.part("row");     // exactly one body row now
+  for (const [columnId, text] of Object.entries(cells)) {
+    await expect(
+      row.locator(`[data-column-id="${columnId}"]:not([data-dg-part])`),
+    ).toHaveText(text);
+  }
+  await this.search("");
+}
+```
+
+- The `data-dg-row-count` assertion is the wait. Nothing else signals that
+  `onRowAdd` finished: `aria-busy` reflects `meta.loading` only.
+- Use a value no other row has - put a run id in the name. Two matches means
+  `expectRowCount(1)` fails, correctly.
+- Scoped to the grid and to one column: no `page.getByText`, no virtualization
+  problem, no strict-mode ambiguity.
+
+## Page object methods
+
+Add these to the `DataGrid` class from the `testing` skill:
+
+```ts
+entryRow(): Locator {
+  return this.part("entry-row");
+}
+
+/** Built-in editors of an open row: an entry row, or a row opened in row mode. */
+async fillRow(rowId: string, values: Record<string, string>): Promise<void> {
+  for (const [columnId, value] of Object.entries(values)) {
+    await this.part("editor", { rowId, columnId })
+      .locator('[data-dg-part="editor-input"]')
+      .fill(value);
+  }
+}
+
+async commitEntryRow(rowId: string): Promise<void> {
+  await this.part("confirm-new-row", { rowId }).click();
+}
+
+/** Save in TMDataGrid.DraftActions, waited until the store is empty. */
+async saveDrafts(): Promise<void> {
+  await this.part("save-all").click();
+  await expect(this.part("save-all")).toHaveAttribute("data-draft-count", "0");
+}
+```
+
+`fillRow` covers the built-in editors. A column with `meta.edit.editor` renders
+the app's own component inside the `editor` part; scope through
+`part("editor", { rowId, columnId })` and fill whatever is inside.
+
+## Recipes
+
+### Add a row, without draft
+
+```ts
+await page.getByRole("button", { name: "Add row" }).click(); // the app's button → edit.addRow()
+const tempId = (await grid.entryRow().getAttribute("data-row-id"))!;
+await grid.fillRow(tempId, { name: "Nordkvist-4711", city: "Stockholm" });
+await grid.commitEntryRow(tempId);
+
+await expect(grid.entryRow()).toHaveCount(0);           // entry row gone; tempId is now meaningless
+await grid.expectRowAdded("Nordkvist-4711", { name: "Nordkvist-4711", city: "Stockholm" });
+```
+
+### Add a row, with draft, then save
+
+```ts
+await grid.commitEntryRow(tempId);
+const row = grid.part("row", { rowId: tempId });        // tempId is still the row's id
+await expect(row).toHaveAttribute("data-new", "true");
+await expect(row).toHaveAttribute("data-draft", "true");
+await expect(grid.part("row-state", { rowId: tempId })).toHaveAttribute("data-state", "new");
+await expect(grid.part("save-all")).toHaveAttribute("data-draft-count", "1");
+
+await grid.saveDrafts();
+await expect(row).toHaveCount(0);                       // tempId dies here
+await grid.expectRowAdded("Nordkvist-4711", { city: "Stockholm" });
+```
+
+Reopening a committed draft row: `edit-row` (the lane's pencil) or a
+double-click puts it back in the entry block, still under the temp id; ✕
+(`discard-new-row`) removes it.
+
+### A ✓ that fails validation
+
+```ts
+await grid.commitEntryRow(tempId);
+await expect(grid.entryRow()).toHaveCount(1);           // still open
+await expect(
+  grid.entryRow().locator('[data-column-id="email"]:not([data-dg-part])'),
+).toHaveAttribute("data-invalid", "true");
+```
+
+The cell and the open `editor` inside it share the column id, so the selector
+leaves the editor out.
+
+### Change a cell or a row
+
+```ts
+const cell = grid.cell({ rowId: "42", columnId: "salary" });
+await cell.dblclick();                                  // cell mode: opens the editor
+await grid.fillRow("42", { salary: "52000" });
+await page.keyboard.press("Enter");                     // commits
+
+// Without draft: onCommit ran, the app applied it, the grid holds nothing
+await expect(cell).toHaveText("52 000");
+
+// Under draft: the grid holds it until Save
+await expect(cell).toHaveAttribute("data-dirty", "true");
+await expect(grid.part("row", { rowId: "42" })).toHaveAttribute("data-dirty", "true");
+await expect(grid.part("row-state", { rowId: "42" })).toHaveAttribute("data-state", "edited");
+```
+
+Row mode: `edit-row` opens the row, `fillRow` reaches its editors, `save-row`
+commits, `cancel-row` discards. `cellConfirm` mode: `editor-confirm` /
+`editor-cancel` beside the input, or Enter / Escape.
+
+### Delete a row
+
+```ts
+const before = Number(await grid.grid.getAttribute("data-dg-row-count"));
+await grid.part("delete-row", { rowId: "42" }).click();
+
+// Without draft: onRowDelete ran, the app removed it from data
+await grid.expectRowCount(before - 1);
+
+// Under draft: marked until Save; restore-row undoes the mark
+await expect(grid.part("row", { rowId: "42" })).toHaveAttribute("data-deleted", "true");
+await grid.part("restore-row", { rowId: "42" }).click();
+```
+
+## Attribute values
+
+A state attribute is present, with the value `"true"`, only while it applies:
+`data-new`, `data-draft`, `data-dirty`, `data-deleted` on a body row,
+`data-committed` on an entry row, `data-dirty`, `data-invalid`, `data-editing`
+on a cell. `[data-new]` and `[data-new="true"]` match the same rows,
+`toHaveAttribute("data-new")` and `toHaveAttribute("data-new", "true")` both
+hold, and the negative is `not.toHaveAttribute("data-new")`.
+
+## Common mistakes
+
+### Looking for the new row's text on the page
+
+`page.getByText("Nordkvist")` searches the whole document: other grids, the
+toolbar, a toast. And the row may be virtualized out of the DOM, so the
+locator fails or flakes depending on sort order and viewport. Narrow with
+search or a filter, assert `data-dg-row-count` is 1, read that one row.
+
+### Keeping the temp id after ✓ without draft
+
+`grid.part("row", { rowId: "__new__1" })` never resolves: without `draft` the
+grid drops the entry and the id at ✓, and the row's real id is the app's. Only
+under `draft: true` does the temp id outlive ✓ - and only until Save.
+
+### Waiting for the added row with a timeout
+
+The app's `onRowAdd` may be async. `expectRowCount(1)` after narrowing retries
+until the row is in `data`; a `waitForTimeout` either wastes time or is too
+short on CI.
+
+### Matching the editor with a cell selector
+
+While a cell is open, `[data-row-id="42"][data-column-id="salary"]` matches
+the cell and the `editor` part inside it, and strict mode fails on the pair.
+`DataGrid.cell()` appends `:not([data-dg-part])`; a hand-written locator on a
+row's cells needs the same.
+
+### Asserting the negative with `"false"`
+
+`toHaveAttribute("data-new", "false")` never passes: a state that does not
+apply is an absent attribute, not `"false"`. Use
+`not.toHaveAttribute("data-new")`, and `:not([data-new])` in CSS.
+
+### Asserting a deletion with `toHaveCount(0)`
+
+A row outside the viewport has no element either. Assert `data-dg-row-count`
+dropped by one, or, under `draft`, `data-deleted="true"` on the row.
+
+### Expecting the grid to show the change without draft
+
+Without `draft: true` the grid holds nothing after a commit: no `data-dirty`,
+no `row-state`, `save-all` stays disabled at `data-draft-count="0"`. The
+assertion is the cell's text after the app has applied the change to `data`.

package/src/{tmdatagrid/components → components}/TMDataGrid.tsx

@@ -7,16 +7,17 @@ import { TMDataGridDraftActions } from "./TMDataGridDraftActions";
 import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
 import { TMDataGridFilterPills } from "./TMDataGridFilterPills";
 import { TMDataGridFooter } from "./TMDataGridFooter";
+import { TMDataGridMenu } from "./TMDataGridMenu";
 import { TMDataGridSearch } from "./TMDataGridSearch";
 import { TMDataGridTable } from "./TMDataGridTable";
 import {
-  TMDataGridColumnsButton,
   TMDataGridFilterButton,
   TMDataGridLoadingIndicator,
   TMDataGridSummaryCount,
   TMDataGridToolbar,
   TMDataGridToolbarSpacer,
 } from "./TMDataGridToolbar";
+import { TMDataGridExportPicker } from "./TMDataGridExportPicker";
 import {
   DEFAULT_TMDATAGRID_SIZE,
   SIZE_CONTROL_SIZE,
@@ -55,29 +56,15 @@ export type TMDataGridProps<TData extends RowData> = TMDataGridApi<TData> & {
   "data-testid"?: string;
 };
 
-/**
- * Root of the grid. Takes the object returned by `useTMDataGrid` - spread it -
- * and publishes it to the compound components below it:
- *
- * ```tsx
- * const grid = useTMDataGrid({ data, columns });
- *
- * <TMDataGrid {...grid}>
- *   <TMDataGrid.Toolbar>
- *     <TMDataGrid.SummaryCount />
- *     <TMDataGrid.Spacer />
- *     <TMDataGrid.ColumnsButton />
- *   </TMDataGrid.Toolbar>
- *   <TMDataGrid.Table />
- *   <TMDataGrid.Footer />
- * </TMDataGrid>
- * ```
- */
+// Documented on the `TMDataGrid` export below.
+// oxlint-disable-next-line react/only-export-components -- exported as the Object.assign compound `TMDataGrid`, which the rule cannot see as a component
 function TMDataGridRoot<TData extends RowData>({
   table,
   ui,
   edit,
   features,
+  filters,
+  exportOptions,
   labels,
   renderDetails,
   renderDetailsEstHeight,
@@ -100,6 +87,8 @@ function TMDataGridRoot<TData extends RowData>({
       ui,
       edit,
       features,
+      filters,
+      exportOptions,
       labels,
       renderDetails,
       renderDetailsEstHeight,
@@ -116,6 +105,8 @@ function TMDataGridRoot<TData extends RowData>({
       ui,
       edit,
       features,
+      filters,
+      exportOptions,
       labels,
       renderDetails,
       renderDetailsEstHeight,
@@ -141,10 +132,33 @@ function TMDataGridRoot<TData extends RowData>({
       >
         {children}
       </div>
+      {/* Portaled by Mantine, so outside the root element; inside the
+          provider, since it reads the grid. */}
+      <TMDataGridExportPicker />
     </TMDataGridContextProvider>
   );
 }
 
+/**
+ * Root of the grid. Takes the object returned by `useTMDataGrid` - spread it -
+ * and publishes it to the compound components below it:
+ *
+ * ```tsx
+ * const grid = useTMDataGrid({ data, columns });
+ *
+ * <TMDataGrid {...grid}>
+ *   <TMDataGrid.Toolbar>
+ *     <TMDataGrid.SummaryCount />
+ *     <TMDataGrid.Spacer />
+ *     <TMDataGrid.Menu>
+ *       <TMDataGrid.Menu.Columns />
+ *     </TMDataGrid.Menu>
+ *   </TMDataGrid.Toolbar>
+ *   <TMDataGrid.Table />
+ *   <TMDataGrid.Footer />
+ * </TMDataGrid>
+ * ```
+ */
 export const TMDataGrid = Object.assign(TMDataGridRoot, {
   Toolbar: TMDataGridToolbar,
   Spacer: TMDataGridToolbarSpacer,
@@ -152,7 +166,7 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
   LoadingIndicator: TMDataGridLoadingIndicator,
   Search: TMDataGridSearch,
   DraftActions: TMDataGridDraftActions,
-  ColumnsButton: TMDataGridColumnsButton,
+  Menu: TMDataGridMenu,
   FilterButton: TMDataGridFilterButton,
   Table: TMDataGridTable,
   Footer: TMDataGridFooter,
@@ -163,6 +177,9 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
    * rendered outside `<TMDataGrid>` - a page header, for instance.
    */
   FilterPills: TMDataGridFilterPills,
-  /** Rendered by `TMDataGrid.ColumnsButton`; exported for custom layouts. */
+  /**
+   * The column chooser as plain controls, for a Popover, a Drawer or an
+   * inline layout; `TMDataGrid.Menu.Columns` is the same thing as menu items.
+   */
   ColumnsPanel: TMDataGridColumnsPanel,
 });

package/src/{tmdatagrid/components → components}/TMDataGridCellEditor.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
 import { FieldApi } from "@tanstack/react-form";
 import type { Cell, Row } from "@tanstack/react-table";
 import {
@@ -11,6 +11,7 @@ import {
 } from "react";
 import classes from "./TMDataGridTable.module.css";
 import { type TMDataGridRowData, useTMDataGridContext } from "../TMDataGridContext";
+import { isButtonElement, isInputElement, isNode } from "../core/dom";
 import {
   getEditFieldName,
   normalizeFieldValidate,
@@ -27,6 +28,7 @@ import { TMDataGridMultiSelectEditor } from "./editors/TMDataGridMultiSelectEdit
 import { TMDataGridNumberEditor } from "./editors/TMDataGridNumberEditor";
 import { TMDataGridSelectEditor } from "./editors/TMDataGridSelectEditor";
 import { TMDataGridStringEditor } from "./editors/TMDataGridStringEditor";
+import { useFieldError } from "./editors/editorShared";
 
 const BUILT_IN_EDITORS: Record<
   string,
@@ -138,6 +140,17 @@ export function TMDataGridCellEditor({
   });
   useEffect(() => field.mount(), [field]);
 
+  // The field's message, read here rather than in each editor: the tooltip
+  // below is the host's, so a column's own `meta.edit.editor` gets it too.
+  const error = useFieldError(field);
+  // When that tooltip is up, held here rather than left to Tooltip's own
+  // `events`: those bring floating-ui's dismiss interaction with them, which
+  // puts an `onKeyDown` on the anchor and stops Escape inside the editor
+  // before the host's handler below can cancel on it. A controlled `opened`
+  // turns the interaction off, so hover and focus are tracked here instead.
+  const [messageHovered, setMessageHovered] = useState(false);
+  const [messageFocused, setMessageFocused] = useState(false);
+
   // Type-to-edit: the seed replaces the value, as it does in a spreadsheet.
   // Only for the types where keystrokes are the input.
   useEffect(() => {
@@ -190,7 +203,7 @@ export function TMDataGridCellEditor({
     // Enter on the ✓ or ✕ is the button's own press, and does what a click on
     // it does: commit and stay, or cancel. Left to the branch below it would
     // commit and move down, and the same button would mean two things.
-    if (event.key === "Enter" && event.target instanceof HTMLButtonElement) {
+    if (event.key === "Enter" && isButtonElement(event.target)) {
       event.stopPropagation();
       return;
     }
@@ -220,7 +233,7 @@ export function TMDataGridCellEditor({
         const next = tabbables[index + (event.shiftKey ? -1 : 1)];
         if (index >= 0 && next !== undefined) {
           next.focus();
-          if (next instanceof HTMLInputElement) next.select();
+          if (isInputElement(next)) next.select();
           return;
         }
         deferAndClose(event.shiftKey ? "defer-shift-tab" : "defer-tab");
@@ -234,8 +247,12 @@ export function TMDataGridCellEditor({
    * Focus left the editor entirely - a click somewhere else. Under `"cell"`
    * that commits (Sheets): a row the user has walked away from is a row they
    * are done typing into, and where the commit lands is `editing.draft`'s
-   * business. A commit blocked by validation keeps the form and its invalid
-   * marker, with the editor closed.
+   * business. A refused commit - validation, or `onCommit` rejecting - leaves
+   * the editor where it is, invalid, with the value still in it: closed, the
+   * cell would render the refused value as if it had landed, and the message
+   * would go with the editor. The engine holds the same line when another
+   * row is opened over a refused one (see `begin`). The user fixes the value,
+   * or Escapes.
    */
   const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
     if (closingRef.current) return;
@@ -244,7 +261,7 @@ export function TMDataGridCellEditor({
     // nothing there; the lane's buttons and the keys end the edit.
     if (isRowShaped) return;
     const next = event.relatedTarget;
-    if (next instanceof Node && event.currentTarget.contains(next)) return;
+    if (isNode(next) && event.currentTarget.contains(next)) return;
     closingRef.current = true;
     if (features.editMode === "cellConfirm") {
       // The draft stays, dirty-marked, waiting for its ✓.
@@ -252,7 +269,8 @@ export function TMDataGridCellEditor({
       return;
     }
     void edit.commit(row.id).then((ok) => {
-      if (!ok) edit.deactivate();
+      // Open for another try: the next blur or key has to be able to commit.
+      if (!ok) closingRef.current = false;
     });
   };
 
@@ -289,7 +307,35 @@ export function TMDataGridCellEditor({
       onMouseDown={(event) => event.stopPropagation()}
       onDoubleClick={(event) => event.stopPropagation()}
     >
-      <Editor {...args} />
+      {/* The validation message, on the editor rather than under it: inside a
+          narrow column Mantine's inline error wraps, grows the row and is
+          clipped, so the input keeps the invalid border and the text comes up
+          beside it. The editor gets a box of its own because Tooltip needs a
+          child that takes a ref, which a `meta.edit.editor` need not forward. */}
+      <Tooltip
+        label={error}
+        opened={error !== undefined && (messageHovered || messageFocused)}
+        withArrow
+        position="bottom-start"
+      >
+        <div
+          className={classes.cellEditorField}
+          onMouseEnter={() => setMessageHovered(true)}
+          onMouseLeave={() => setMessageHovered(false)}
+          onFocus={() => setMessageFocused(true)}
+          onBlur={(event) => {
+            // Focus moving inside the editor - into an open dropdown, say - is
+            // not focus leaving it.
+            const next = event.relatedTarget;
+            if (isNode(next) && event.currentTarget.contains(next)) {
+              return;
+            }
+            setMessageFocused(false);
+          }}
+        >
+          <Editor {...args} />
+        </div>
+      </Tooltip>
       {/* cellConfirm's chrome: the draft only commits through the ✓ (or
           Enter), so the pair sits right beside the input. */}
       {features.editMode === "cellConfirm" && (

package/src/{tmdatagrid/components → components}/TMDataGridColumnsPanel.module.css

@@ -12,7 +12,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--mantine-spacing-sm);
-  padding: 0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-sm);
+}
+
+.columnsPanelSearch + * .columnsPanelList {
+  padding-top: 0;
 }
 
 .columnsPanelFooter {

package/src/{tmdatagrid/components → components}/TMDataGridColumnsPanel.tsx

@@ -1,4 +1,6 @@
 import {
+  Box,
+  type BoxProps,
   Button,
   Checkbox,
   ScrollArea,
@@ -6,36 +8,42 @@ import {
   TextInput,
   Tooltip,
 } from "@mantine/core";
-import { useSelector } from "@tanstack/react-store";
 import { useState } from "react";
 import classes from "./TMDataGridColumnsPanel.module.css";
 import { useTMDataGridContext } from "../TMDataGridContext";
-import { getColumnLabel } from "../core/columnUtils";
+import {
+  getColumnLabel,
+  showColumnSearch,
+  type TMDataGridColumnSearchable,
+} from "../core/columnUtils";
+import { useHideableColumns } from "./useHideableColumns";
 import { SearchIcon } from "./icons";
 
 /**
- * The "Manage columns" surface. Reachable from every column header menu and
- * from the grid's burger menu, so it lives on its own and is rendered by
- * `TMDataGrid.ColumnsButton`.
+ * The "Manage columns" surface as plain controls, for a host that is not a
+ * menu - a Popover, a Drawer, an inline layout. `TMDataGrid.Menu.Columns` is
+ * the same chooser as menu items.
  */
-export function TMDataGridColumnsPanel() {
-  const { table, labels, controlSize, resetSettings } = useTMDataGridContext();
+/** Mantine's style props (`w={320}`, `p="sm"`) are set on the panel block. */
+export type TMDataGridColumnsPanelProps = BoxProps & {
+  /**
+   * The search box over the list: `"auto"` (the default) from six hideable
+   * columns, `true` always, `false` never.
+   */
+  searchable?: TMDataGridColumnSearchable;
+};
+
+export function TMDataGridColumnsPanel({
+  className,
+  searchable = "auto",
+  ...others
+}: TMDataGridColumnsPanelProps = {}) {
+  const { labels, controlSize, resetSettings } = useTMDataGridContext();
   const [search, setSearch] = useState("");
 
-  const columnVisibility = useSelector(
-    table.store,
-    (state) => state.columnVisibility,
-  );
+  const { columns, columnVisibility, shownCount, setAllVisible } =
+    useHideableColumns();
 
-  // Only what can actually be hidden. A column with `enableHiding: false` is
-  // left out rather than listed and disabled: a box that cannot be ticked only
-  // invites the question, and every generated lane is one - the checkbox and
-  // edit lanes hold the controls the grid needs, the tree column follows the
-  // grouping state, the row-number gutter follows `enableRowNumbers`. None of
-  // them is a setting.
-  const columns = table
-    .getAllLeafColumns()
-    .filter((column) => column.getCanHide());
   const needle = search.trim().toLowerCase();
   const visibleInPanel = needle
     ? columns.filter((column) =>
@@ -43,41 +51,25 @@ export function TMDataGridColumnsPanel() {
       )
     : columns;
 
-  const shownCount = columns.filter(
-    (column) => columnVisibility[column.id] !== false,
-  ).length;
-
-  /**
-   * Show or hide every listed column.
-   *
-   * Not `table.toggleAllColumnsVisible`, which writes a visibility entry for
-   * *every* leaf column: showing all would publish the tree column - hidden
-   * because nothing is grouped, not because the user hid it - and hiding all
-   * would force the same column visible, since it writes `!getCanHide()` for
-   * the columns it will not touch. Either way a lane the panel never listed
-   * changes state, and persistence then keeps it that way.
-   */
-  const setAllVisible = (visible: boolean) => {
-    table.setColumnVisibility((previous) => {
-      const next = { ...previous };
-      for (const column of columns) next[column.id] = visible;
-      return next;
-    });
-  };
-
   return (
-    <div data-dg-part="columns-panel" className={classes.columnsPanel}>
-      <div className={classes.columnsPanelSearch}>
-        <TextInput
-          value={search}
-          onChange={(event) => setSearch(event.currentTarget.value)}
-          placeholder={labels.columnsSearchPlaceholder}
-          leftSection={<SearchIcon size={16} stroke={1.6} />}
-          size={controlSize}
-          data-dg-part="columns-search"
-          data-autofocus
-        />
-      </div>
+    <Box
+      data-dg-part="columns-panel"
+      className={[classes.columnsPanel, className].filter(Boolean).join(" ")}
+      {...others}
+    >
+      {showColumnSearch(searchable, columns.length) && (
+        <div className={classes.columnsPanelSearch}>
+          <TextInput
+            value={search}
+            onChange={(event) => setSearch(event.currentTarget.value)}
+            placeholder={labels.columnsSearchPlaceholder}
+            leftSection={<SearchIcon size={16} stroke={1.6} />}
+            size={controlSize}
+            data-dg-part="columns-search"
+            data-autofocus
+          />
+        </div>
+      )}
 
       <ScrollArea.Autosize mah={260} type="auto">
         <div className={classes.columnsPanelList}>
@@ -126,6 +118,6 @@ export function TMDataGridColumnsPanel() {
           </Button>
         </Tooltip>
       </div>
-    </div>
+    </Box>
   );
 }