@jielga/tmdatagrid 0.2.0 → 0.3.0

package/dist/styles.css

@@ -1,2 +1,2 @@
-._root_1jc4n_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_1jc4n_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_1jc4n_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_1jc4n_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_1jc4n_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_1jc4n_8{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px;--dg-row-selected-bg:var(--mantine-primary-color-light);text-align:left;border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-md);background-color:var(--mantine-color-body);flex-direction:column;min-height:0;display:flex;overflow:hidden}._columnsPanel_1492o_1{flex-direction:column;width:280px;display:flex}._columnsPanelSearch_1492o_7{padding:var(--mantine-spacing-sm)}._columnsPanelList_1492o_11{gap:var(--mantine-spacing-sm);padding:0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);flex-direction:column;display:flex}._columnsPanelFooter_1492o_18{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);display:flex}._filterPanel_1jw69_4{top:calc(var(--dg-header-height) + 2px);left:var(--mantine-spacing-md);z-index:5;padding:var(--mantine-spacing-sm);border-radius:var(--mantine-radius-md);border:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);box-shadow:var(--mantine-shadow-md);position:absolute}._filterRow_1jw69_16{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._footer_6r35a_1{justify-content:flex-end;align-items:center;gap:var(--mantine-spacing-lg);padding:4px var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);flex-shrink:0;min-height:48px;display:flex}._tableWrapper_utldp_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_utldp_10{flex:1;min-height:0;position:relative;overflow:auto}._grid_utldp_18{display:grid}._headerRow_utldp_24{grid-column:1/-1;grid-template-columns:subgrid;z-index:3;display:grid;position:sticky;top:0}._bodyRow_utldp_33{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_utldp_33:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_utldp_33[data-highlighted=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_utldp_33[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_utldp_33:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_utldp_65{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);font-size:var(--dg-font-size);align-items:center;display:flex}._cellContent_utldp_63{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_utldp_65[data-align=right]{justify-content:flex-end}._bodyCell_utldp_65[data-align=center]{justify-content:center}._bodyCell_utldp_65[data-align=left] ._cellContent_utldp_63{flex:auto}._messageRow_utldp_95{justify-content:center;align-items:center;gap:var(--mantine-spacing-xs);padding:var(--mantine-spacing-xl);flex-direction:column;grid-column:1/-1;display:flex}._stickyLeft_1iqrf_11{border-right:1px solid var(--mantine-color-default-border)}._stickyRight_1iqrf_15{border-left:1px solid var(--mantine-color-default-border)}._stickyLeft_1iqrf_11:after,._stickyRight_1iqrf_15:after{content:"";pointer-events:none;width:4px;position:absolute;top:0;bottom:0}._stickyLeft_1iqrf_11:after{background:linear-gradient(90deg,var(--lightningcss-light,#00000014)var(--lightningcss-dark,#00000047),#0000);left:100%}._stickyRight_1iqrf_15:after{background:linear-gradient(270deg,var(--lightningcss-light,#00000014)var(--lightningcss-dark,#00000047),#0000);right:100%}._headerCell_1oqkm_1{padding:0 var(--dg-padding);min-width:0;min-height:var(--dg-header-height);font-weight:600;font-size:var(--dg-font-size);background-color:var(--mantine-color-body);border-bottom:1px solid var(--mantine-color-default-border);-webkit-user-select:none;user-select:none;align-items:center;gap:2px;display:flex;position:relative}._headerCell_1oqkm_1[data-align=right]{justify-content:flex-end}._headerCell_1oqkm_1[data-align=center]{justify-content:center}._headerCell_1oqkm_1[data-active=true] ._headerTitle_1oqkm_25{color:var(--mantine-primary-color-filled)}._headerTitle_1oqkm_25{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_1oqkm_1[data-align=right] ._headerTitle_1oqkm_25{text-align:right}._headerCell_1oqkm_1[data-align=center] ._headerTitle_1oqkm_25{justify-content:center;display:flex}._headerActions_1oqkm_48{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_1oqkm_1[data-align=right] ._headerActions_1oqkm_48{order:-1;margin-left:0;margin-right:auto}._headerAction_1oqkm_48{display:none}._headerCell_1oqkm_1:hover ._headerAction_1oqkm_48,._headerCell_1oqkm_1:focus-within ._headerAction_1oqkm_48,._headerAction_1oqkm_48[data-pinned-visible=true]{display:flex}._headerCellSortable_1oqkm_77{cursor:pointer}._headerCellDragging_1oqkm_84{opacity:.4}._headerCellDropBefore_1oqkm_88:before,._headerCellDropAfter_1oqkm_89:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_1oqkm_88:before{left:0}._headerCellDropAfter_1oqkm_89:before{right:0}._columnSeparator_1oqkm_109{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_1oqkm_121{cursor:col-resize;touch-action:none}._columnSeparator_1oqkm_109:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_1oqkm_1:hover ._columnSeparator_1oqkm_109:after,._headerCell_1oqkm_1:focus-within ._columnSeparator_1oqkm_109:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_1oqkm_121:hover:after,._columnSeparatorActive_1oqkm_144:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_1oqkm_150{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_4my8t_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_4my8t_10{flex:1}
+._root_13dg1_8[data-size=xs]{--dg-row-height:34px;--dg-header-height:32px;--dg-font-size:var(--mantine-font-size-xs);--dg-padding:6px}._root_13dg1_8[data-size=sm]{--dg-row-height:42px;--dg-header-height:38px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:8px}._root_13dg1_8[data-size=md]{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px}._root_13dg1_8[data-size=lg]{--dg-row-height:62px;--dg-header-height:52px;--dg-font-size:var(--mantine-font-size-md);--dg-padding:14px}._root_13dg1_8[data-size=xl]{--dg-row-height:72px;--dg-header-height:60px;--dg-font-size:var(--mantine-font-size-lg);--dg-padding:18px}._root_13dg1_8{--dg-row-height:52px;--dg-header-height:44px;--dg-font-size:var(--mantine-font-size-sm);--dg-padding:10px;--dg-row-selected-bg:var(--mantine-primary-color-light);--dg-row-highlight-bg:var(--mantine-primary-color-light-hover);--dg-row-group-bg:var(--mantine-color-body);text-align:left;border:1px solid var(--mantine-color-default-border);border-radius:var(--mantine-radius-md);background-color:var(--mantine-color-body);flex-direction:column;min-height:0;display:flex;overflow:hidden}._columnsPanel_1492o_1{flex-direction:column;width:280px;display:flex}._columnsPanelSearch_1492o_7{padding:var(--mantine-spacing-sm)}._columnsPanelList_1492o_11{gap:var(--mantine-spacing-sm);padding:0 var(--mantine-spacing-sm) var(--mantine-spacing-sm);flex-direction:column;display:flex}._columnsPanelFooter_1492o_18{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);display:flex}._groupToggle_h06xv_4{width:100%;min-width:0;font-size:var(--dg-font-size);color:inherit;align-items:center;gap:6px;display:flex}._chevron_h06xv_14{color:var(--mantine-color-dimmed);flex:none;align-items:center;transition:transform .12s;display:flex}._chevron_h06xv_14[data-expanded=true]{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){._chevron_h06xv_14{transition:none}}._groupLabel_h06xv_34{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:600;overflow:hidden}._groupCount_h06xv_44{color:var(--mantine-color-dimmed);font-variant-numeric:tabular-nums;flex:none}._filterPanel_izakx_4{top:calc(var(--dg-header-height) + 2px);left:var(--mantine-spacing-md);z-index:5;padding:var(--mantine-spacing-sm);border-radius:var(--mantine-radius-md);border:1px solid var(--mantine-color-default-border);background-color:var(--mantine-color-body);box-shadow:var(--mantine-shadow-md);position:absolute}._filterRow_izakx_16{align-items:flex-end;gap:var(--mantine-spacing-xs);display:flex}._filterPanelHeader_izakx_22{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);padding-bottom:var(--mantine-spacing-xs);display:flex}._filterPanelFooter_izakx_30{justify-content:space-between;align-items:center;gap:var(--mantine-spacing-md);display:flex}._filterPills_1yybb_3{align-items:center;gap:var(--mantine-spacing-xs);flex-wrap:wrap;display:flex}._filterPills_1yybb_3 ._pill_1yybb_15{background-color:var(--lightningcss-light,var(--mantine-color-gray-1))var(--lightningcss-dark,var(--mantine-color-dark-5));color:var(--lightningcss-light,var(--mantine-color-black))var(--lightningcss-dark,var(--mantine-color-dark-0));border:1px solid var(--lightningcss-light,var(--mantine-color-gray-3))var(--lightningcss-dark,var(--mantine-color-dark-3))}._pillLabel_1yybb_27{font:inherit;color:inherit;cursor:pointer}._pillLabel_1yybb_27:hover{text-decoration:underline}._footer_149ca_1{justify-content:flex-end;align-items:center;gap:var(--mantine-spacing-lg);padding:4px var(--mantine-spacing-sm);border-top:1px solid var(--mantine-color-default-border);flex-shrink:0;min-height:48px;display:flex}._footer_149ca_1[data-paging-suspended=true]{opacity:.55}._tableWrapper_chabz_2{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}._scrollContainer_chabz_10{flex:1;min-height:0;position:relative;overflow:auto}._grid_chabz_18{display:grid}._headerRow_chabz_24{grid-column:1/-1;grid-template-columns:subgrid;z-index:3;display:grid;position:sticky;top:0}._bodyRow_chabz_33{--row-bg:var(--mantine-color-body);grid-column:1/-1;grid-template-columns:subgrid;align-items:stretch;display:grid}._bodyRow_chabz_33:hover{--row-bg:var(--mantine-color-default-hover)}._bodyRow_chabz_33[data-grouped=true]{--row-bg:var(--dg-row-group-bg)}._bodyRow_chabz_33[data-context-menu=true]{--row-bg:var(--mantine-color-default-hover)}._bodyRow_chabz_33[data-selected-bg=true]{--row-bg:var(--dg-row-selected-bg)}._bodyRow_chabz_33[data-highlighted=true]{--row-bg:var(--dg-row-highlight-bg)}._bodyRow_chabz_33[data-selects-on-click=true]{-webkit-user-select:none;user-select:none}._bodyRow_chabz_33:focus-visible{outline:2px solid var(--mantine-primary-color-filled);outline-offset:-2px}._bodyCell_chabz_91{padding:0 var(--dg-padding);border-bottom:1px solid var(--mantine-color-default-border);background-color:var(--row-bg);font-size:var(--dg-font-size);align-items:center;display:flex}._bodyCell_chabz_91[data-select-column=true]{padding:0}._cellContent_chabz_89{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._bodyCell_chabz_91[data-align=right]{justify-content:flex-end}._bodyCell_chabz_91[data-align=center]{justify-content:center}._bodyCell_chabz_91[data-align=left] ._cellContent_chabz_89{flex:auto}._messageRow_chabz_129{justify-content:center;align-items:center;gap:var(--mantine-spacing-xs);padding:var(--mantine-spacing-xl);flex-direction:column;grid-column:1/-1;display:flex}._stickyLeft_1iqrf_11{border-right:1px solid var(--mantine-color-default-border)}._stickyRight_1iqrf_15{border-left:1px solid var(--mantine-color-default-border)}._stickyLeft_1iqrf_11:after,._stickyRight_1iqrf_15:after{content:"";pointer-events:none;width:4px;position:absolute;top:0;bottom:0}._stickyLeft_1iqrf_11:after{background:linear-gradient(90deg,var(--lightningcss-light,#00000014)var(--lightningcss-dark,#00000047),#0000);left:100%}._stickyRight_1iqrf_15:after{background:linear-gradient(270deg,var(--lightningcss-light,#00000014)var(--lightningcss-dark,#00000047),#0000);right:100%}._headerCell_49xbo_1{padding:0 var(--dg-padding);min-width:0;min-height:var(--dg-header-height);font-weight:600;font-size:var(--dg-font-size);background-color:var(--mantine-color-body);border-bottom:1px solid var(--mantine-color-default-border);-webkit-user-select:none;user-select:none;align-items:center;gap:2px;display:flex;position:relative}._headerCell_49xbo_1[data-align=right]{justify-content:flex-end}._headerCell_49xbo_1[data-align=center]{justify-content:center}._headerCell_49xbo_1[data-select-column=true]{padding:0}._headerCell_49xbo_1[data-active=true] ._headerTitle_49xbo_31{color:var(--mantine-primary-color-filled)}._headerTitle_49xbo_31{text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}._headerCell_49xbo_1[data-align=right] ._headerTitle_49xbo_31{text-align:right}._headerCell_49xbo_1[data-align=center] ._headerTitle_49xbo_31{justify-content:center;display:flex}._headerActions_49xbo_54{flex-shrink:0;align-items:center;gap:0;margin-left:auto;display:flex}._headerCell_49xbo_1[data-align=right] ._headerActions_49xbo_54{order:-1;margin-left:0;margin-right:auto}._headerAction_49xbo_54{display:none}._headerCell_49xbo_1:hover ._headerAction_49xbo_54,._headerCell_49xbo_1:focus-within ._headerAction_49xbo_54,._headerAction_49xbo_54[data-pinned-visible=true]{display:flex}._headerCellSortable_49xbo_83{cursor:pointer}._headerCellDragging_49xbo_90{opacity:.4}._headerCellDropBefore_49xbo_94:before,._headerCellDropAfter_49xbo_95:before{content:"";background-color:var(--mantine-primary-color-filled);z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}._headerCellDropBefore_49xbo_94:before{left:0}._headerCellDropAfter_49xbo_95:before{right:0}._columnSeparator_49xbo_115{z-index:1;justify-content:center;width:10px;height:50%;display:flex;position:absolute;top:25%;right:0;transform:translate(50%)}._columnSeparatorResizable_49xbo_127{cursor:col-resize;touch-action:none}._columnSeparator_49xbo_115:after{content:"";background-color:#0000;width:1px;height:100%;transition:background-color .12s,width .12s}._headerCell_49xbo_1:hover ._columnSeparator_49xbo_115:after,._headerCell_49xbo_1:focus-within ._columnSeparator_49xbo_115:after{background-color:var(--mantine-color-default-border)}._columnSeparatorResizable_49xbo_127:hover:after,._columnSeparatorActive_49xbo_150:after{background-color:var(--mantine-primary-color-filled);width:2px}._menuItemActive_49xbo_156{background-color:var(--mantine-color-default-hover);font-weight:600}._toolbar_4my8t_1{align-items:center;gap:var(--mantine-spacing-xs);padding:6px var(--mantine-spacing-xs);flex-shrink:0;min-height:42px;display:flex}._toolbarSpacer_4my8t_10{flex:1}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jielga/tmdatagrid",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A React data grid built on TanStack Table v9 and Mantine — always virtualized, with resizable, reorderable, sortable, filterable, hideable and pinnable columns.",
   "license": "MIT",
   "type": "module",

package/skills/columns/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.2.0'
+  library_version: '0.3.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/columns.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/filterOperators.ts'

package/skills/features/SKILL.md

@@ -17,7 +17,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.2.0'
+  library_version: '0.3.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/features.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/capabilities.ts'

package/skills/getting-started/SKILL.md

@@ -4,13 +4,13 @@ description: >
   Set up TMDataGrid, a compound React data grid built on TanStack Table v9 and
   Mantine. Covers useTMDataGrid, the TMDataGrid root, context, the component
   catalog (Table, Footer, Toolbar, Spacer, SummaryCount, FilterButton,
-  ColumnsButton, FilterPanel, ColumnsPanel), the size scale and the
+  ColumnsButton, FilterPanel, FilterPills, ColumnsPanel), the size scale and the
   bounded-height layout requirement. Load when adding a grid, choosing which
   parts to render, or when rows do not appear.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.2.0'
+  library_version: '0.3.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/getting-started.md'
   - 'Jielga/TMDataGrid:src/docs/components.md'
@@ -123,21 +123,24 @@ takes a fixed pixel width once resized or pinned.
 
 ## Components
 
-All read the grid from context and must be rendered inside `TMDataGrid`. Order
-and presence are up to you — the root is a plain flex column.
+All read the grid from context and must be rendered inside `TMDataGrid`, except
+`TMDataGrid.FilterPills`, which takes the grid as an `api` prop and can live
+anywhere on the page. Order and presence are up to you — the root is a plain
+flex column.
 
 | Component | Props | Notes |
 | --- | --- | --- |
 | `TMDataGrid` | `table`, `ui`, `features`, `size`, `className`, `style` | Root. Provides context. `style` also takes CSS variables: `--dg-row-selected-bg`, `--dg-row-height`, `--dg-header-height`, `--dg-font-size`, `--dg-padding`. |
-| `TMDataGrid.Table` | `onRowClick(row)` | Header, virtualized body, filter panel. `onRowClick` runs in addition to selection under `rowSelectionMode: "row"`. |
+| `TMDataGrid.Table` | `onRowClick(row)`, `rowContextMenu` render prop, `rowContextMenuProps` | Header, virtualized body, filter panel. `onRowClick` runs in addition to selection under `rowSelectionMode: "row"`. |
 | `TMDataGrid.Footer` | `pageSizeOptions` (default `[10, 25, 50, 100]`), `pagination` render prop | Pagination controls. Renders nothing unless pagination is enabled. |
 | `TMDataGrid.Toolbar` | `children` | Flex row above the grid. |
 | `TMDataGrid.Spacer` | — | Pushes later toolbar items right. |
 | `TMDataGrid.SummaryCount` | `children` | Visible rows out of total. |
 | `TMDataGrid.FilterButton` | — | Toggles filter panel. Renders nothing if no column is filterable. |
 | `TMDataGrid.ColumnsButton` | — | Opens column manager. Renders nothing if no column is hideable. |
-| `TMDataGrid.FilterPanel` | — | Rendered by `.Table`; exported for custom layouts. |
+| `TMDataGrid.FilterPanel` | — | Rendered by `.Table`; exported for custom layouts. Header close button, Escape, click-away, "Add filter" and "Clear all". |
 | `TMDataGrid.ColumnsPanel` | — | Rendered by `.ColumnsButton`; exported for custom layouts. |
+| `TMDataGrid.FilterPills` | `api`, `size` (default `"sm"`), `showClearAll` (default `true`), `onPillClick(columnId)`, `className` | One pill per active filter, ✕ to clear it. Takes the api as a prop, so it can be rendered outside the grid. Also exported as `TMDataGridFilterPills`. |
 
 Pass the row type so `onRowClick` stays typed:
 
@@ -145,6 +148,37 @@ Pass the row type so `onRowClick` stays typed:
 <TMDataGrid.Table<Employee> onRowClick={(row) => open(row.original.id)} />
 ```
 
+`rowContextMenu` fills the dropdown of a Mantine `Menu` the grid opens at the
+pointer on a right-click (or a long press). The grid owns the `Menu` — opening,
+positioning, and closing on Escape, outside click, body scroll or an item pick —
+so the render prop only says what goes in it:
+
+```tsx
+<TMDataGrid.Table<Employee>
+  rowContextMenu={({ table, row, cell, close }) => (
+    <>
+      <Menu.Label>{row.original.firstName}</Menu.Label>
+      <Menu.Item onClick={() => open(row.original.id)}>Open</Menu.Item>
+      <Menu.Item
+        onClick={() =>
+          navigator.clipboard.writeText(String(cell?.getValue() ?? ""))
+        }
+      >
+        Copy cell value
+      </Menu.Item>
+    </>
+  )}
+/>
+```
+
+`cell` is the one that was right-clicked, `table` is there for actions that read
+the selection, and `close` is for dropdown content that is not a `Menu.Item`
+(those close themselves). Return `null` to leave a row without a menu. It is
+called during render, and only for the open row, so it must stay pure — put the
+work in the item handlers. Right-clicking does not change the selection or the
+highlight; the row carries `data-context-menu` while its menu is open. Pass
+`rowContextMenuProps` for `width`, `shadow`, `position` and the rest.
+
 `TMDataGrid.Footer` reads totals from `table.getRowCount()`, which prefers
 `options.rowCount`. `TMDataGrid.SummaryCount` uses `meta.totalRowCount` when
 provided, otherwise the pre-filtered row count.
@@ -194,6 +228,7 @@ mirrors them. Set `meta.rowHeight` for a height outside the scale.
 | `openColumnFilter(api, columnId)` | Adds an empty filter for a column and opens the panel. |
 | `getColumnLabel(column)` | `meta.label`, a string header, or the column id. |
 | `getColumnType(column)` | `meta.type`, defaulting to `"string"`. |
+| `formatFilterLabel({ label, type, filter })` | The one-line filter description used on the pills. |
 | `moveColumn({ table, columnId, targetId, side })` | Moves a column next to another. See the `features` skill. |
 | `moveColumnByStep({ table, columnId, direction })` | Moves a column one position within its region. |
 | `SELECT_COLUMN_ID` | Id of the generated checkbox column. |

package/skills/options/SKILL.md

@@ -13,7 +13,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.2.0'
+  library_version: '0.3.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/use-tm-data-grid.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'

package/skills/server-side/SKILL.md

@@ -10,7 +10,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '0.2.0'
+  library_version: '0.3.0'
 sources:
   - 'Jielga/TMDataGrid:src/docs/server-side.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'

package/src/tmdatagrid/components/TMDataGrid.module.css

@@ -46,9 +46,19 @@
   --dg-header-height: 44px;
   --dg-font-size: var(--mantine-font-size-sm);
   --dg-padding: 10px;
-  /* Background of a highlighted (selected) row. Override it on the grid:
+  /* Background of a selected row, when `showSelectedBackground` is on. Override
+     it on the grid:
      <TMDataGrid style={{ "--dg-row-selected-bg": "var(--mantine-color-blue-0)" }} /> */
   --dg-row-selected-bg: var(--mantine-primary-color-light);
+  /* Background of the highlighted row, under a selectionMode that has one.
+     Stronger than the selected background by default, since under
+     "checkboxAndHighlight" the two show up together. */
+  --dg-row-highlight-bg: var(--mantine-primary-color-light-hover);
+  /* Background of a group row. Transparent by default — the bold label and the
+     chevron are enough, and with the tree collapsed every row on screen is a
+     group row, so a tint would grey out the whole grid. Set it to give groups a
+     band of their own. */
+  --dg-row-group-bg: var(--mantine-color-body);
 
   display: flex;
   flex-direction: column;

package/src/tmdatagrid/components/TMDataGrid.tsx

@@ -4,6 +4,7 @@ import classes from "./TMDataGrid.module.css";
 import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
 import { TMDataGridContextProvider } from "../TMDataGridContext";
 import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
+import { TMDataGridFilterPills } from "./TMDataGridFilterPills";
 import { TMDataGridFooter } from "./TMDataGridFooter";
 import { TMDataGridTable } from "./TMDataGridTable";
 import {
@@ -101,6 +102,11 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
   Footer: TMDataGridFooter,
   /** Rendered by `TMDataGrid.Table`; exported for custom layouts. */
   FilterPanel: TMDataGridFilterPanel,
+  /**
+   * Takes the grid as an `api` prop rather than from context, so it can be
+   * rendered outside `<TMDataGrid>` — a page header, for instance.
+   */
+  FilterPills: TMDataGridFilterPills,
   /** Rendered by `TMDataGrid.ColumnsButton`; exported for custom layouts. */
   ColumnsPanel: TMDataGridColumnsPanel,
 });

package/src/tmdatagrid/components/TMDataGridColumnsPanel.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import classes from "./TMDataGridColumnsPanel.module.css";
 import { useTMDataGridContext } from "../TMDataGridContext";
 import { getColumnLabel } from "../core/columnUtils";
+import { GROUP_COLUMN_ID } from "./TMDataGridGroupColumn";
 import { SearchIcon } from "./icons";
 
 /**
@@ -20,7 +21,12 @@ export function TMDataGridColumnsPanel() {
     (state) => state.columnVisibility,
   );
 
-  const columns = table.getAllLeafColumns();
+  // The tree column is left out rather than listed and disabled: its visibility
+  // is not a setting at all, it follows the grouping state, so an unchecked box
+  // that cannot be ticked would only invite the question.
+  const columns = table
+    .getAllLeafColumns()
+    .filter((column) => column.id !== GROUP_COLUMN_ID);
   const needle = search.trim().toLowerCase();
   const visibleInPanel = needle
     ? columns.filter((column) =>

package/src/tmdatagrid/components/TMDataGridFilterPanel.module.css

@@ -18,3 +18,18 @@
   align-items: flex-end;
   gap: var(--mantine-spacing-xs);
 }
+
+.filterPanelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-md);
+  padding-bottom: var(--mantine-spacing-xs);
+}
+
+.filterPanelFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-md);
+}

package/src/tmdatagrid/components/TMDataGridFilterPanel.tsx

@@ -1,5 +1,6 @@
-import { ActionIcon, Button, Select, Stack, TextInput } from "@mantine/core";
+import { ActionIcon, Button, Select, Stack, Text, TextInput } from "@mantine/core";
 import { useSelector } from "@tanstack/react-store";
+import { useEffect, useRef } from "react";
 import classes from "./TMDataGridFilterPanel.module.css";
 import { useTMDataGridContext } from "../TMDataGridContext";
 import { getColumnLabel, getColumnType } from "../core/columnUtils";
@@ -33,6 +34,27 @@ export function TMDataGridFilterPanel() {
     table.store,
     (state) => state.columnFilters,
   );
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Clicking away hides the panel, the way any floating surface behaves. On
+  // pointerdown rather than click, so a press that starts outside dismisses it
+  // even when the pointer is released somewhere else.
+  useEffect(() => {
+    if (!opened) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (panelRef.current?.contains(target)) return;
+      // The toolbar button toggles the panel itself. Closing from here first
+      // would leave its click reopening what the user meant to close.
+      if (target.closest("[data-dg-filter-toggle]")) return;
+      ui.actions.closeFilterPanel();
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [opened, ui]);
 
   if (!opened) return null;
 
@@ -86,6 +108,14 @@ export function TMDataGridFilterPanel() {
     );
   }
 
+  /** Clears every filter, including half-typed ones the pills never showed. */
+  function clearAllFilters() {
+    table.setColumnFilters([]);
+    // Same exit as removing the last filter row by hand: an empty panel has
+    // nothing to show but its own buttons.
+    ui.actions.closeFilterPanel();
+  }
+
   function addFilter() {
     const nextColumn = filterableColumns.find(
       (column) => !columnFilters.some((filter) => filter.id === column.id),
@@ -103,8 +133,39 @@ export function TMDataGridFilterPanel() {
     ]);
   }
 
+  const canAddFilter = filterableColumns.some(
+    (column) => !columnFilters.some((filter) => filter.id === column.id),
+  );
+
   return (
-    <div className={classes.filterPanel}>
+    <div
+      ref={panelRef}
+      role="group"
+      aria-label="Filters"
+      className={classes.filterPanel}
+      // Escape is what closes a floating surface, and every control that can
+      // hold focus in here sits inside this element.
+      onKeyDown={(event) => {
+        if (event.key !== "Escape") return;
+        event.stopPropagation();
+        ui.actions.closeFilterPanel();
+      }}
+    >
+      <div className={classes.filterPanelHeader}>
+        <Text size={controlSize} fw={600}>
+          Filters
+        </Text>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          size="sm"
+          aria-label="Close filters"
+          onClick={ui.actions.closeFilterPanel}
+        >
+          <CloseIcon size={16} stroke={1.6} />
+        </ActionIcon>
+      </div>
+
       <Stack gap="xs">
         {columnFilters.map((filter) => {
           const column = table.getColumn(filter.id);
@@ -129,6 +190,10 @@ export function TMDataGridFilterPanel() {
                 size={controlSize}
                 w={160}
                 allowDeselect={false}
+                // Both dropdowns render inside the panel: a portalled one is
+                // outside it in the DOM, and picking an option would read as a
+                // click away and close the panel under the user.
+                comboboxProps={{ withinPortal: false }}
                 data={columnOptions}
                 value={filter.id}
                 onChange={(next) => next && changeFilterColumn(filter.id, next)}
@@ -139,6 +204,7 @@ export function TMDataGridFilterPanel() {
                 size={controlSize}
                 w={170}
                 allowDeselect={false}
+                comboboxProps={{ withinPortal: false }}
                 data={getOperatorsForType(type).map((operator) => ({
                   value: operator,
                   label: FILTER_OPERATOR_LABELS[operator],
@@ -168,14 +234,25 @@ export function TMDataGridFilterPanel() {
           );
         })}
 
-        <Button
-          variant="subtle"
-          size="compact-sm"
-          style={{ alignSelf: "flex-start" }}
-          onClick={addFilter}
-        >
-          Add filter
-        </Button>
+        <div className={classes.filterPanelFooter}>
+          <Button
+            variant="subtle"
+            size="compact-sm"
+            disabled={!canAddFilter}
+            onClick={addFilter}
+          >
+            Add filter
+          </Button>
+          <Button
+            variant="subtle"
+            color="gray"
+            size="compact-sm"
+            disabled={columnFilters.length === 0}
+            onClick={clearAllFilters}
+          >
+            Clear all
+          </Button>
+        </div>
       </Stack>
     </div>
   );

package/src/tmdatagrid/components/TMDataGridFilterPills.module.css

@@ -0,0 +1,35 @@
+/* Wraps rather than scrolls: the pills are a summary, and a summary that goes
+   off-screen is not one. */
+.filterPills {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mantine-spacing-xs);
+}
+
+/* Mantine's dark-scheme pill is `dark-7` — the same colour as the body — so a
+   pill sitting on the page rather than inside a `PillsInput` disappears. Both
+   schemes are restated here so the two stay a pair, with a border to keep the
+   shape readable against any surface. Scoped through `.filterPills` for the
+   specificity to beat Mantine's own rule whichever stylesheet loads last. */
+.filterPills .pill {
+  background-color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+  border: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
+}
+
+/* The label is a button so a pill can be clicked back open, but it must read as
+   part of the pill — Mantine's own label styles carry the font. */
+.pillLabel {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.pillLabel:hover {
+  text-decoration: underline;
+}

package/src/tmdatagrid/components/TMDataGridFilterPills.tsx

@@ -0,0 +1,135 @@
+import { Button, Pill, UnstyledButton } from "@mantine/core";
+import type { RowData } from "@tanstack/react-table";
+import { useSelector } from "@tanstack/react-store";
+import classes from "./TMDataGridFilterPills.module.css";
+import { getColumnLabel, getColumnType } from "../core/columnUtils";
+import {
+  formatFilterLabel,
+  isFilterActive,
+  isTMDataGridFilterValue,
+} from "../core/filterOperators";
+import type { TMDataGridSize } from "../core/sizes";
+import { openColumnFilter, type TMDataGridApi } from "../useTMDataGrid";
+
+export type TMDataGridFilterPillsProps<TData extends RowData> = {
+  /** The object returned by `useTMDataGrid`. */
+  api: TMDataGridApi<TData>;
+  /** Mantine size of the pills. Defaults to `"sm"`. */
+  size?: TMDataGridSize;
+  /** "Clear all" button, shown once two filters are active. Defaults to `true`. */
+  showClearAll?: boolean;
+  /**
+   * Replaces what a click on a pill's label does. The default opens the grid's
+   * filter panel on that column.
+   */
+  onPillClick?: (columnId: string) => void;
+  className?: string;
+};
+
+/**
+ * One pill per active filter — `First name: Sofia ✕` — with the ✕ clearing that
+ * filter and a click on the label opening the filter panel on its column.
+ *
+ * The one grid component that takes the api as a prop instead of reading
+ * context, so it can live anywhere: a page header, a card title, a breadcrumb
+ * row. Renders nothing while no filter is active.
+ *
+ * ```tsx
+ * const grid = useTMDataGrid({ data, columns });
+ *
+ * <Group>
+ *   <Title order={3}>Employees</Title>
+ *   <TMDataGridFilterPills api={grid} />
+ * </Group>
+ * ```
+ *
+ * Half-typed filters are left out: a filter that is not narrowing the rows yet
+ * has nothing to report, which is the same rule the funnel indicator uses.
+ */
+export function TMDataGridFilterPills<TData extends RowData>({
+  api,
+  size = "sm",
+  showClearAll = true,
+  onPillClick,
+  className,
+}: TMDataGridFilterPillsProps<TData>) {
+  const { table } = api;
+  const columnFilters = useSelector(
+    table.store,
+    (state) => state.columnFilters,
+  );
+
+  const activeFilters = columnFilters.filter((filter) =>
+    isFilterActive(filter.value),
+  );
+  if (activeFilters.length === 0) return null;
+
+  return (
+    <div
+      role="group"
+      aria-label="Active filters"
+      className={[classes.filterPills, className].filter(Boolean).join(" ")}
+    >
+      <Pill.Group size={size}>
+        {activeFilters.map((filter) => {
+          const column = table.getColumn(filter.id);
+          const label = column ? getColumnLabel(column) : filter.id;
+          const value = filter.value;
+          // isFilterActive already vouched for the shape; this narrows it.
+          if (!isTMDataGridFilterValue(value)) return null;
+
+          return (
+            <Pill
+              key={filter.id}
+              size={size}
+              className={classes.pill}
+              withRemoveButton
+              onRemove={() =>
+                table.setColumnFilters(
+                  columnFilters.filter((other) => other.id !== filter.id),
+                )
+              }
+              // Mantine hides its remove button from assistive tech and from
+              // the tab order, because inside a `PillsInput` Backspace is the
+              // way out. These pills stand on their own, so the ✕ has to be a
+              // real button.
+              removeButtonProps={{
+                "aria-label": `Clear ${label} filter`,
+                "aria-hidden": false,
+                tabIndex: 0,
+              }}
+            >
+              <UnstyledButton
+                className={classes.pillLabel}
+                onClick={() =>
+                  onPillClick
+                    ? onPillClick(filter.id)
+                    : openColumnFilter(api, filter.id)
+                }
+              >
+                {formatFilterLabel({
+                  label,
+                  type: column ? getColumnType(column) : "string",
+                  filter: value,
+                })}
+              </UnstyledButton>
+            </Pill>
+          );
+        })}
+      </Pill.Group>
+
+      {showClearAll && activeFilters.length > 1 && (
+        // Below two pills their own ✕ is the shorter path, so the button would
+        // only be a second way to do the same thing.
+        <Button
+          variant="subtle"
+          color="gray"
+          size="compact-xs"
+          onClick={() => table.setColumnFilters([])}
+        >
+          Clear all
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/tmdatagrid/components/TMDataGridFooter.module.css

@@ -8,3 +8,11 @@
   flex-shrink: 0;
   border-top: 1px solid var(--mantine-color-default-border);
 }
+
+/* Grouping suspends paging. The pager stays put and fades rather than
+   disappearing, so the footer reads as switched off rather than as having
+   vanished — and the row it holds does not change height under the grid. Its
+   controls carry their own `disabled`; this is the label half. */
+.footer[data-paging-suspended="true"] {
+  opacity: 0.55;
+}