@stealthscale/component-tables 0.2.2 → 0.2.3

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { t as recipe } from "./recipe-E5qwAx85.js";
+import { t as recipe } from "./recipes-E5qwAx85.js";
 import { definePreset } from "@stealthscale/theme/authoring";
 //#region src/theme.ts
 /**

package/locales/en/specimen/data-table.json

@@ -0,0 +1,276 @@
+{
+  "about": "A table of records over TanStack Table. `DataTable.useDataTable` creates the table from columns written with `DataTable.createColumnHelper`, `DataTable.Root` provides it to the parts, and `DataTable.Table` renders it with the collections table's looks.",
+  "account": "Account",
+  "aggregates": {
+    "about": "`aggregate` sets how the orders of a cell become one figure: their value together, the average order, the lowest or the highest order, or the number of orders. The totals are aggregated from the orders too, never from the cells beside them. With the average, a region's total is the average of all its orders, which differs from the mean of its four quarters whenever the quarters have different numbers of orders.",
+    "average": "Average order",
+    "caption": "Orders by region, per quarter",
+    "count": "Number of orders",
+    "label": "Figure",
+    "max": "Highest order",
+    "min": "Lowest order",
+    "sum": "Order value",
+    "title": "Pivot aggregates"
+  },
+  "amount": "Amount",
+  "benelux": "Benelux",
+  "bridgewater": "Bridgewater Supply",
+  "claims": {
+    "about": "A column that states `meta.edit` edits its cells in place in a `grid`. Enter or F2 opens a cell's editor with its value, a character typed on a cell replaces the value, and a double click opens the editor too. Enter saves and moves down, Tab saves and moves to the next cell, and Escape drops the edit. In an editor opened by typing, the arrows save and move as they do in a spreadsheet. `validate` refuses an empty description and an amount that is not in euros: the editor remains open and states why under the cell. `onCellEdit` receives each saved edit, and the example writes it into its rows. `unsaved` marks each cell that differs from the last save with a bar at its start, and Save and Discard keep or drop the changes. The category column edits through a native select, the column's `editor`. The taxi's amount starts changed and unsaved.",
+    "amount": "Amount",
+    "caption": "Expense claims to review",
+    "category": "Category",
+    "changes_one": "{{count}} unsaved change",
+    "changes_other": "{{count}} unsaved changes",
+    "changes_zero": "No unsaved changes",
+    "claim": "Claim",
+    "description": "Description",
+    "dinner": "Client dinner in Lyon",
+    "discard": "Discard",
+    "flight": "Flight to Oslo",
+    "hotel": "Hotel for two nights",
+    "invalid": "Enter an amount in euros, such as 42.50",
+    "licence": "Design tool licence",
+    "meals": "Meals",
+    "monitor": "Monitor for the office",
+    "office": "Office",
+    "required": "Enter a description",
+    "save": "Save",
+    "software": "Software",
+    "taxi": "Taxi to the airport",
+    "title": "Editing",
+    "travel": "Travel",
+    "unsaved": "Unsaved change"
+  },
+  "columns": {
+    "about": "The select column and the account column are pinned with `columnPinning`: they stick to the start while the figures scroll under them, ruled on the side of the scrolling columns. With `enableColumnResizing` each column's header ends in a separator. Drag it, or focus it and press ArrowLeft or ArrowRight to change the width by 16 pixels, Home or End for the smallest or the largest width `defaultColumn` states, and Enter to restore the width the column states. A double click restores it too.",
+    "caption": "Payouts this quarter, by share",
+    "resize": "Resize {{column}}",
+    "share": "Share",
+    "size": "{{size}} pixels",
+    "title": "Pinning and resizing"
+  },
+  "details": {
+    "about": "`DataTable.expandColumn` adds a column of buttons that open a detail row under their rows. Each button is named by its row and states `aria-expanded`, and `aria-controls` while its detail is open. The column's header is read only by assistive technology. The table passes `getRowCanExpand` so every row opens.",
+    "average": "Average transfer",
+    "caption": "Payouts this quarter, with details",
+    "header": "Details",
+    "one": "Details of {{account}}",
+    "title": "Details"
+  },
+  "endless": {
+    "about": "`onEndReached` runs when the last row of a windowed table comes within its overscan of the viewport, once per number of rows. Here it loads fifty more transfers after a delay, until the archive's thousand are in the table, and the table states `aria-busy` while a batch loads. The line under the table announces each batch.",
+    "caption": "Transfer archive, loaded as you scroll",
+    "loaded": "{{count}} of {{total}} transfers loaded",
+    "loading": "Loading more transfers…",
+    "title": "Rows loaded on scroll"
+  },
+  "filters": {
+    "about": "`DataTable.ColumnFilter` in the table's `columnActions` adds a filter button to each column that states `meta.filter`. The button opens a panel with the filter: a text the reference contains, a box per account or state with the number of rows that have it, or a minimum and a maximum amount. The boxes list only the values the other filters leave, which is TanStack's faceting. A column with a filter shows its button filled, and the table announces how many rows match.",
+    "active": "Filter {{column}}, active",
+    "caption": "Recent transfers",
+    "clear": "Clear",
+    "empty": "No transfer matches the filters.",
+    "filter": "Filter {{column}}",
+    "found": "{{count}} of {{total}} transfers",
+    "max": "Maximum",
+    "min": "Minimum",
+    "title": "Column filters"
+  },
+  "grid": {
+    "about": "`grid` renders the table in the `grid` role over TanStack's cell selection, as in a spreadsheet. One cell is in the tab order. The arrow keys move between the cells, Home and End go to the ends of a row, Control or Command with Home or End goes to the first or the last cell, and Page Up and Page Down move ten rows. Shift with an arrow or a press extends the selection, a drag selects the cells it crosses, and Control or Command with a press adds a range. Control or Command with A selects every cell, and Escape keeps only the focused cell. Control or Command with C copies the selected cells as tab-separated values, which a spreadsheet pastes into its own cells. The second and third quarters of Sales, Marketing and Design start selected.",
+    "caption": "Operating budget for 2027, by department and quarter",
+    "department": "Department",
+    "design": "Design",
+    "engineering": "Engineering",
+    "finance": "Finance",
+    "legal": "Legal",
+    "marketing": "Marketing",
+    "people": "People",
+    "q1": "Q1",
+    "q2": "Q2",
+    "q3": "Q3",
+    "q4": "Q4",
+    "sales": "Sales",
+    "support": "Support",
+    "title": "Grid"
+  },
+  "grouped": {
+    "about": "`grouping` groups the transfers by a column's value, which is TanStack's grouping. Each group is a row with a toggle, the value and the number of its transfers, and the amount column sums the group through `aggregationFn: \"sum\"` and writes the sum through `aggregatedCell`. The table is a `treegrid` with the keys of rows with levels. Because the table states `enableGrouping`, each column's menu groups the rows by that column or stops grouping by it, and the grouped column moves to the start. The pending transfers start open.",
+    "caption": "Transfers this quarter, by state",
+    "group": "Group by column",
+    "title": "Grouped rows",
+    "ungroup": "Ungroup"
+  },
+  "halden": "Halden Freight",
+  "iberia": "Iberia",
+  "kestrel": "Kestrel Studio",
+  "lazy": {
+    "about": "Each folder states that it opens through `getRowCanExpand` before its items exist. While a folder is open without them, the row under it shows a loader with `loadingLabel`. The items arrive after a delay the first time a folder opens: the example asks for them in `onExpandedChange` and passes them back in new `data` through `getSubRows`. The table states `autoResetExpanded: false`, so an open folder remains open when its items arrive.",
+    "archive": "Archive",
+    "caption": "Shared drive",
+    "contracts": "Contracts",
+    "hotels": "Hotels.pdf",
+    "invoices": "Invoices",
+    "loading": "Loading the folder…",
+    "meals": "Meals.csv",
+    "name": "Name",
+    "october": "October.pdf",
+    "q1": "Q1 2026.pdf",
+    "q2": "Q2 2026.pdf",
+    "q3": "Q3 2026.pdf",
+    "readme": "Read me.txt",
+    "receipts": "Receipts",
+    "september": "September.pdf",
+    "size": "Size",
+    "template": "Contract template.pdf",
+    "title": "Rows loaded on demand",
+    "trains": "Trains.pdf",
+    "travel": "Travel"
+  },
+  "ledger": {
+    "caption": "Transfers this quarter",
+    "failed": "Failed",
+    "next": "Next page",
+    "page": "Page {{page}}",
+    "pages": "Transfer pages",
+    "pending": "Pending",
+    "perPage": "Rows per page",
+    "previous": "Previous page",
+    "range": "{{start}}–{{end}} of {{count}}",
+    "reference": "Reference",
+    "settled": "Settled",
+    "state": "State",
+    "summary": "Page {{page}} of {{totalPages}}"
+  },
+  "linnet": "Linnet Foods",
+  "manager": {
+    "about": "`DataTable.ColumnManager` lists the columns a person can hide, here in a popover. Each row's box shows or hides its column, and the last visible column's box is disabled. Drag a row by its handle, or focus the handle and press Space and the arrow keys, to move the column. Reset restores the order and the columns the table started with. The region column starts hidden.",
+    "button": "Columns",
+    "caption": "Recent transfers",
+    "heading": "Columns",
+    "move": "Move {{item}}",
+    "reset": "Reset",
+    "title": "Column manager"
+  },
+  "menus": {
+    "about": "`DataTable.ColumnMenu` in the table's `columnActions` adds a menu button to each column's header. The menu lists only what changes the column: the sort directions it is not sorted in and a clear, the regions it is not pinned to and an unpin, and a hide while another column is visible. After a hide, focus moves to the menu button of the column that takes its place.",
+    "ascending": "Sort ascending",
+    "caption": "Recent transfers",
+    "descending": "Sort descending",
+    "end": "Pin to end",
+    "hide": "Hide column",
+    "options": "Options for {{column}}",
+    "start": "Pin to start",
+    "title": "Column menus",
+    "unpinned": "Unpin",
+    "unsorted": "Clear sort"
+  },
+  "nordics": "Nordics",
+  "pages": {
+    "about": "`DataTable.Pagination` is the navigation pagination on TanStack's page state, and `DataTable.PageSize` sets how many rows a page shows. The table starts at ten rows a page. A change of the sort returns the table to its first page, and a new page size keeps the first row of the page in view.",
+    "title": "Pages"
+  },
+  "perrin": "Perrin & Vos",
+  "pinned": {
+    "about": "`DataTable.pinColumn` adds a toggle to each row that pins the row to the top of the body. A pinned row keeps its place whatever the sort, the filters or the page, which is TanStack's row pinning, and the last pinned row rules its end at the header rule's width. Each toggle is named by its row and states `aria-pressed`. Perrin & Vos starts pinned.",
+    "caption": "Payouts to review",
+    "header": "Pin",
+    "one": "Pin {{account}} to the top",
+    "title": "Pinned rows"
+  },
+  "pivot": {
+    "about": "`DataTable.pivot` turns the year's orders into a cross-tab for `useDataTable`: a row for each region and product, a column for each quarter, and the value of the orders in each cell. Each region's name spans the rows of its products. The totals come from the orders themselves, in the last column and the footer row. The west region sells no docks, so it has no row for them, and the south region sold no monitors in the second quarter, so that cell is empty rather than zero.",
+    "caption": "Order value by region and product, per quarter",
+    "docks": "Docks",
+    "laptops": "Laptops",
+    "missing": "No orders",
+    "monitors": "Monitors",
+    "north": "North",
+    "product": "Product",
+    "q1": "Q1",
+    "q2": "Q2",
+    "q3": "Q3",
+    "q4": "Q4",
+    "region": "Region",
+    "south": "South",
+    "title": "Pivot",
+    "total": "Total",
+    "west": "West"
+  },
+  "search": {
+    "about": "`DataTable.Search` filters the rows by any of their values through TanStack's global filter, and Escape clears it. Half a second after the last change the table announces how many rows match, and it shows the empty row while none does. The columns read the translated names, so the search matches the words on screen.",
+    "caption": "Payouts this quarter",
+    "clear": "Clear the search",
+    "empty": "No payout matches the search.",
+    "found": "{{count}} of {{total}} payouts",
+    "label": "Search payouts",
+    "title": "Search"
+  },
+  "selection": {
+    "about": "`DataTable.selectColumn` adds a column of checkboxes. Each box is named by its row, and the box in the header selects every row. Hold Shift while pressing a box, or while pressing Space, to select every row from the box pressed before it. Each row states `aria-selected`.",
+    "all": "Select every payout",
+    "caption": "Payouts to approve",
+    "count_one": "{{count}} payout selected",
+    "count_other": "{{count}} payouts selected",
+    "count_zero": "No payouts selected",
+    "one": "Select {{account}}",
+    "title": "Selection"
+  },
+  "server": {
+    "about": "A server sorts, searches and pages the transfers here, with a delay. The table states `manualSorting`, `manualFiltering` and `manualPagination`, keeps the sort, the search and the page in state, and counts the pages from the server's `rowCount`. The table states `aria-busy` while a page loads. A new search returns to the first page.",
+    "caption": "Transfers on the server",
+    "empty": "No transfer matches the search.",
+    "loading": "Loading transfers…",
+    "search": "Search references",
+    "title": "Server pages"
+  },
+  "sorting": {
+    "about": "Press a column's name to sort by it, and press it again to reverse the order. The sorted column's header states `aria-sort`, and the arrow beside its name turns for a descending sort. A column that is not sorted shows its arrow faintly under the pointer. In a column of figures the arrow comes before the name, so the name ends where the figures end. Each change of the sort is announced.",
+    "caption": "Payouts this quarter",
+    "title": "Sorting"
+  },
+  "spanned": {
+    "about": "A column that states `spanRows: true` merges adjacent cells of equal value into one cell that spans their rows, which is TanStack's cell spanning. The payouts are sorted by region, so each region's name spans its accounts. Sort by another column and the spans follow the new order.",
+    "caption": "Payouts by region",
+    "region": "Region",
+    "title": "Spanned cells"
+  },
+  "title": "Data table",
+  "totals": {
+    "about": "A column's `footer` renders in a footer row under the body. Each total is TanStack's aggregation: the column states `aggregationFn: \"sum\"` and its footer renders `column.getAggregationValue()`. The footer of a row-header column is a row header, and the footer of a numeric column aligns to the end.",
+    "caption": "Payouts this quarter, with totals",
+    "title": "Totals",
+    "total": "Total"
+  },
+  "transfers": "Transfers",
+  "tree": {
+    "about": "A table that states `getSubRows` renders the rows under each record as rows with levels, in the `treegrid` role. Each row states its level, its place among its siblings and whether it is open, and the cost centre's cell leads with a toggle indented by the row's level. One row is in the tab order: ArrowDown and ArrowUp move between the rows, ArrowRight opens a row and then moves into it, ArrowLeft closes a row and then moves to its parent, and Enter and Space open and close it. A sort orders each set of siblings. Engineering starts open.",
+    "brand": "Brand",
+    "budget": "Budget",
+    "caption": "Budgets this quarter",
+    "centre": "Cost centre",
+    "collapse": "Collapse",
+    "engineering": "Engineering",
+    "enterprise": "Enterprise",
+    "expand": "Expand",
+    "growth": "Growth",
+    "infrastructure": "Infrastructure",
+    "marketing": "Marketing",
+    "mobile": "Mobile",
+    "operations": "Operations",
+    "partners": "Partners",
+    "payments": "Payments",
+    "platform": "Platform",
+    "sales": "Sales",
+    "spent": "Spent",
+    "title": "Rows with levels",
+    "tooling": "Developer tools"
+  },
+  "windowed": {
+    "about": "`windowed` renders only the rows in or near the table's viewport, so the table takes ten thousand transfers. A spacer row above and below the rendered rows keeps the scrollbar as long as every row, and the table states `aria-rowcount` and each row its `aria-rowindex`, so a screen reader counts every transfer. The caller gives the table a height, here with `maxBlockSize`. A pinned row sticks under the header while the other rows scroll. TR-19996 starts pinned.",
+    "caption": "Transfers this year",
+    "pin": "Pin {{reference}} to the top",
+    "title": "Windowed rows"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stealthscale/component-tables",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Renders records in data tables over TanStack Table: sorting, filtering, selection, pages, column sizes and pins, rows with levels, windowed rows, pivots and editable grids.",
   "keywords": [
     "components",
@@ -20,6 +20,7 @@
   "files": [
     "dist",
     "LICENSE",
+    "locales",
     "README.md"
   ],
   "type": "module",
@@ -36,28 +37,28 @@
     "access": "public"
   },
   "dependencies": {
-    "@stealthscale/component-actions": "^0.2.1",
-    "@stealthscale/component-collections": "^0.1.1",
-    "@stealthscale/component-data": "^0.2.1",
-    "@stealthscale/component-disclosure": "^0.2.2",
-    "@stealthscale/component-feedback": "^0.2.1",
-    "@stealthscale/component-forms": "^0.3.0",
-    "@stealthscale/component-navigation": "^0.3.0",
+    "@stealthscale/component-actions": "^0.2.3",
+    "@stealthscale/component-collections": "^0.1.3",
+    "@stealthscale/component-data": "^0.2.2",
+    "@stealthscale/component-disclosure": "^0.2.4",
+    "@stealthscale/component-feedback": "^0.2.3",
+    "@stealthscale/component-forms": "^0.3.2",
+    "@stealthscale/component-navigation": "^0.3.2",
     "@tanstack/react-table": "9.2.4",
     "@tanstack/react-virtual": "^3.14"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18",
-    "@stealthscale/component-a11y": "^0.1.2",
-    "@stealthscale/component-primitives": "^0.3.0",
+    "@stealthscale/component-a11y": "^0.1.3",
+    "@stealthscale/component-primitives": "^0.3.1",
     "@stealthscale/hooks": "^0.3.0",
     "@stealthscale/provider-locale": "^0.1.1",
     "@stealthscale/theme": "^0.5.0",
     "@stealthscale/vite-config": "^0.8.0",
-    "@stealthscale/vite-config-i18n": "^0.2.1",
+    "@stealthscale/vite-config-i18n": "^0.2.2",
     "@stealthscale/vite-config-react": "^0.9.1",
-    "@stealthscale/vite-config-specimen": "^0.2.1",
-    "@stealthscale/vite-config-theme": "^0.2.1",
+    "@stealthscale/vite-config-specimen": "^0.3.0",
+    "@stealthscale/vite-config-theme": "^0.3.0",
     "@stealthscale/vite-config-typescript": "^0.3.0",
     "@testing-library/react": "^16.3",
     "@types/react": "^19.3",
@@ -72,8 +73,8 @@
     "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@stealthscale/component-a11y": "^0.1.2",
-    "@stealthscale/component-primitives": "^0.3.0",
+    "@stealthscale/component-a11y": "^0.1.3",
+    "@stealthscale/component-primitives": "^0.3.1",
     "@stealthscale/hooks": "^0.3.0",
     "@stealthscale/provider-locale": "^0.1.1",
     "@stealthscale/theme": "^0.5.0",