Changelog

Newest first. A release can change the npm packages, the registry blocks, or both:

• Packages (@querycn/*) update with npm install @querycn/table-react@latest ….
• Blocks (data-table, filter-builder) are files in your project, so they only change when you add them again. See Updating.

The full list of package changes is in each package's CHANGELOG.md on GitHub.

September 28, 2026Copy Anchor Link

NewCopy Anchor Link

• @tablecn is in the shadcn registry directory. npx shadcn@latest add @tablecn/data-table works right away, without adding the registry to components.json first.
• Inline editing. Users edit a cell where it is: Enter, F2 or a double click opens its editor, Enter saves. Turn it on with meta.edit on a column and onCellEdit in useDataTable, which can save to your API and throw to show an error under the cell. Editors for text, numbers, selects and yes/no, a select can search your API with loadOptions, and you can add your own. See Inline editing.
• A time field type for a time of day with no date, like 09:30, with is at, is after, is between and the other time operators. See Fields.
• Time and date-time pickers. The filter picks times and date-times from scrolling hour and minute columns, with Now and OK. Both pickers are also standalone components you can copy: Time picker and Date time picker.
• A Full example page: one orders table with every feature on, and all of its code.
• A Right-to-left page, with a live Arabic-direction table and the setup for Radix UI, Base UI and React Aria.

FixedCopy Anchor Link

• While dragging a column's edge, the resize cursor stays on, even when the pointer leaves the header.
• On right-to-left pages, headers and cells align to the right, the selection checkbox keeps its space from the table's edge, the resize line is centered on the edge, and the filter's range arrow points from the start to the end.
• Popovers (the filter panel, pickers, the Columns menu, the API select editor) and the filter's calendars follow the direction of your primitive library's provider, even when only part of the page is right-to-left. The Radix UI and Base UI blocks now list radix-ui / @base-ui/react as dependencies for it.
• The blocks ask for the package versions they use. data-table asked for @querycn/table-react@^0.1.0, so a new install could get an older version than the block needs.

UpdatingCopy Anchor Link

1. Update the packages: npm install @querycn/table-react@latest @querycn/filter-react@latest (and @querycn/filter-next@latest on Next.js).
2. Add the blocks again to get inline editing and the pickers: npx shadcn@latest add @tablecn/data-table @tablecn/filter-builder --overwrite. Commit your changes first.
3. If you pass complete message objects instead of using mergeTableMessages / mergeMessages, add the new texts: the table's editing group, and the filter's placeholders.time, placeholders.hour, placeholders.minute, actions.now and actions.ok. TypeScript points out what's missing.

September 26, 2026Copy Anchor Link

NewCopy Anchor Link

• Turn a feature off for the whole table: enableSorting, enableColumnResizing and enableColumnOrdering in useDataTable. Pass enableSorting to useTableQuery too, so your backend never gets a sort the table ignores. See Columns.

ChangedCopy Anchor Link

• The selection bar under the toolbar only shows when you pass selectionActions. Without actions, the pagination already counts the selected rows. See Row selection.

FixedCopy Anchor Link

• The selection column has no ⋯ menu, which used to cover its select-all checkbox.

UpdatingCopy Anchor Link

Update @querycn/table-react, and add @tablecn/data-table again with --overwrite.

September 25, 2026: first releaseCopy Anchor Link

• The data-table block: search, sorting by one or several columns, pages, row selection, loading, empty and error states, and virtualization. Users move, resize, pin, hide and color columns, and their layout is saved in the browser.
• The filter-builder block: conditions like Status is Paid and Amount is between 10 and 50, with AND / OR, chips, and options loaded from your API.
• Everything in the URL: ?q=nguyen&status__eq=paid&sort=-amount&page=2, through adapters for Next.js, react-router and the browser.
• Client or server data, with request builders for JSON:API-style APIs, django-filter and PostgREST.
• Radix UI, Base UI and React Aria versions of both blocks, and English and Vietnamese texts.