From a587e435a303503e383fa8c118228565abbbabea Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sun, 11 Feb 2024 01:24:41 -0600 Subject: [PATCH 01/19] finish row model docs (#5339) --- docs/guide/row-models.md | 67 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 2 deletions(-) diff --git a/docs/guide/row-models.md b/docs/guide/row-models.md index 9e7f898e2a..cb7eabe8c0 100644 --- a/docs/guide/row-models.md +++ b/docs/guide/row-models.md @@ -20,13 +20,18 @@ function Component() { What is this `getCoreRowModel` function? And why do you have to import it from TanStack Table only to just pass it back to itself? -Well the answer is that TanStack Table is a modular library. Not all code for every single feature is included in the createTable functions/hooks by default. You only need to import and include the code that you will need to correctly generate rows based on the features you want to use. +Well, the answer is that TanStack Table is a modular library. Not all code for every single feature is included in the createTable functions/hooks by default. You only need to import and include the code that you will need to correctly generate rows based on the features you want to use. + +### What are Row Models? + +Row models run under the hood of TanStack Table to transform your original data in useful ways that are needed for data grid features like filtering, sorting, grouping, expanding, and pagination. The rows that get generated and render on screen won't necessarily be a 1:1 mapping of the original data that you passed to the table. They may be sorted, filtered, paginated, etc. ### Import Row Models You should only import the row models that you need. Here are all of the row models that are available: ```ts +//only import the row models you need import { getCoreRowModel, getExpandedRowModel, @@ -56,4 +61,62 @@ const table = useReactTable({ ### Customize/Fork Row Models -You don't have to use the exact row models that are provided by TanStack Table. If you need some advanced customization for certain row models, feel free to copy the [source code](https://github.com/TanStack/table/tree/main/packages/table-core/src/utils) for the row model you want to customize and modify it to your needs. \ No newline at end of file +You don't have to use the exact row models that are provided by TanStack Table. If you need some advanced customization for certain row models, feel free to copy the [source code](https://github.com/TanStack/table/tree/main/packages/table-core/src/utils) for the row model you want to customize and modify it to your needs. + +### Using Row Models + +Once your table instance has been created, you can access all of the row models that you may need directly from the table instance. There are even more derived row models available apart from the ones that you may have imported. + +For normal rendering use cases, you will probably only need to use the `table.getRowModel()` method, as this row model will use all/any of the other row models depending on which features you have enabled or disabled. All of the other row models are available for you to "dig into" some of the underlying data transformations that are happening in the table. + +### Available Row Models on Table Instance + +- **`getRowModel`** - This is the main row model that you should use for rendering your table rows markup. It will use all of the other row models to generate the final row model that you will use to render your table rows. + +- `getCoreRowModel` - returns a basic row model that is just a 1:1 mapping of the original data passed to the table. + +- `getFilteredRowModel` - returns a row model that accounts for column filtering and global filtering. +- `getPreFilteredRowModel` - returns a row model before column filtering and global filtering are applied. + +- `getGroupedRowModel` - returns a row model that applies grouping and aggregation to the data and creates sub-rows. +- `getPreGroupedRowModel` - returns a row model before grouping and aggregation are applied. + +- `getSortedRowModel` - returns a row model that has had sorting applied to it. +- `getPreSortedRowModel` - returns a row model before sorting is applied (rows are in original order). + +- `getExpandedRowModel` - returns a row model that accounts for expanded/hidden sub-rows. +- `getPreExpandedRowModel` - returns a row model that only includes root level rows with no expanded sub-rows included. Still includes sorting. + +- `getPaginationRowModel` - returns a row model that only includes the rows that should be displayed on the current page based on the pagination state. +- `getPrePaginationRowModel` - returns a row model without pagination applied (includes all rows). + +- `getSelectedRowModel` - returns a row model of all selected rows (but only based on the `data` that was passed to the table). Runs after `getCoreRowModel`. +- `getPreSelectedRowModel` - returns a row model before row selection is applied (Just returns `getCoreRowModel`). +- `getGroupedSelectedRowModel` - returns a row model of selected rows after grouping. Runs after `getSortedRowModel`, which runs after `getGroupedRowModel`, which runs after `getFilteredRowModel`. +- `getFilteredSelectedRowModel` - returns a row model of selected rows after column filtering and global filtering. Runs after `getFilteredRowModel`. + +### The Order of Row Model Execution + +Knowing how TanStack Table processes rows internally can help you gain a better understanding of what is happening under the hood, and help you debug any issues you may encounter. + +Internally, this is the order in which each of the row models are applied to the data, if their respective features are enabled: + +`getCoreRowModel` -> `getFilteredRowModel` -> `getGroupedRowModel` -> `getSortedRowModel` -> `getExpandedRowModel` -> `getPaginationRowModel` -> `getRowModel` + +If in any case the respective is disabled or turned off with a `"manual*" table option, the `getPre*RowModel` will be used instead in that step of the process. + +As you can see above, first the data is filtered, then grouped, then sorted, then expanded, and then finally paginated as the final step. + +### Row Model Data Structure + +Each row model will provide you the rows in 3 different useful formats: + +1. `rows` - An array of rows. +2. `flatRows` - An array of rows, but all sub-rows are flattened into the top level. +3. `rowsById` - An object of rows, where each row is keyed by its `id`. This is useful for quickly looking up rows by their `id` with better performance. + +```ts +console.log(table.getRowModel().rows) // array of rows +console.log(table.getRowModel().flatRows) // array of rows, but all sub-rows are flattened into the top level +console.log(table.getRowModel().rowsById['row-id']) // object of rows, where each row is keyed by its `id` +``` \ No newline at end of file From bca3dd6f6fae281ef8015797d3e92dedaa3bf4c7 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sun, 11 Feb 2024 11:10:24 -0600 Subject: [PATCH 02/19] docs: links to framework url (#5340) --- docs/api/core/table.md | 2 +- docs/guide/column-filtering.md | 12 ++++++------ docs/guide/column-ordering.md | 2 +- docs/guide/column-pinning.md | 4 ++-- docs/guide/column-sizing.md | 6 +++--- docs/guide/column-visibility.md | 4 ++-- docs/guide/expanding.md | 4 ++-- docs/guide/faceted-values.md | 2 +- docs/guide/fuzzy-filtering.md | 2 +- docs/guide/global-filtering.md | 2 +- docs/guide/grouping.md | 2 +- docs/guide/pagination.md | 14 +++++++------- docs/guide/row-models.md | 10 +++++----- docs/guide/row-pinning.md | 2 +- docs/guide/row-selection.md | 4 ++-- docs/guide/sorting.md | 4 ++-- docs/guide/virtualization.md | 6 +++--- 17 files changed, 41 insertions(+), 41 deletions(-) diff --git a/docs/api/core/table.md b/docs/api/core/table.md index e2c42a945a..9c7a74a277 100644 --- a/docs/api/core/table.md +++ b/docs/api/core/table.md @@ -89,7 +89,7 @@ declare module '@tanstack/table-core' { } ``` -> 🧠 Think of this option as an arbitrary "context" for your table. This is a great way to pass arbitrary data or functions to your table without having to pass it to every thing the table touches. A good example is passing a locale object to your table to use for formatting dates, numbers, etc or even a function that can be used to update editable data like in the [editable-data example](../examples/react/editable-data). +> 🧠 Think of this option as an arbitrary "context" for your table. This is a great way to pass arbitrary data or functions to your table without having to pass it to every thing the table touches. A good example is passing a locale object to your table to use for formatting dates, numbers, etc or even a function that can be used to update editable data like in the [editable-data example](../framework/react/examples/editable-data). ### `state` diff --git a/docs/guide/column-filtering.md b/docs/guide/column-filtering.md index 1045eb0856..6b6072a542 100644 --- a/docs/guide/column-filtering.md +++ b/docs/guide/column-filtering.md @@ -6,12 +6,12 @@ title: Column Filtering Want to skip to the implementation? Check out these examples: -- [filters](../examples/react/filters) (includes faceting) -- [editable-data](../examples/react/editable-data) -- [expanding](../examples/react/expanding) -- [grouping](../examples/react/grouping) -- [pagination](../examples/react/pagination) -- [row-selection](../examples/react/row-selection) +- [filters](../framework/react/examples/filters) (includes faceting) +- [editable-data](../framework/react/examples/editable-data) +- [expanding](../framework/react/examples/expanding) +- [grouping](../framework/react/examples/grouping) +- [pagination](../framework/react/examples/pagination) +- [row-selection](../framework/react/examples/row-selection) ## API diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md index 0d9d388b3c..7a91ede5ff 100644 --- a/docs/guide/column-ordering.md +++ b/docs/guide/column-ordering.md @@ -6,7 +6,7 @@ title: Column Ordering Want to skip to the implementation? Check out these examples: -- [column-ordering](../examples/react/column-ordering) +- [column-ordering](../framework/react/examples/column-ordering) ## API diff --git a/docs/guide/column-pinning.md b/docs/guide/column-pinning.md index 1531d7c33b..83bae6eece 100644 --- a/docs/guide/column-pinning.md +++ b/docs/guide/column-pinning.md @@ -6,8 +6,8 @@ title: Column Pinning Want to skip to the implementation? Check out these examples: -- [column-pinning](../examples/react/column-pinning) -- [row-pinning](../examples/react/row-pinning) +- [column-pinning](../framework/react/examples/column-pinning) +- [row-pinning](../framework/react/examples/row-pinning) ## API diff --git a/docs/guide/column-sizing.md b/docs/guide/column-sizing.md index 44c252c8a2..8b810e55d7 100644 --- a/docs/guide/column-sizing.md +++ b/docs/guide/column-sizing.md @@ -6,8 +6,8 @@ title: Column Sizing Want to skip to the implementation? Check out these examples: -- [column-sizing](../examples/react/column-sizing) -- [column-resizing-performant](../examples/react/column-resizing-performant) +- [column-sizing](../framework/react/examples/column-sizing) +- [column-resizing-performant](../framework/react/examples/column-resizing-performant) ## API @@ -166,7 +166,7 @@ TanStack Table keeps track of an state object called `columnSizingInfo` that you If you are creating large or complex tables (and using React 😉), you may find that if you do not add proper memoization to your render logic, your users may experience degraded performance while resizing columns. -We have created a [performant column resizing example](../examples/react/column-resizing-performant) that demonstrates how to achieve 60 fps column resizing renders with a complex table that may otherwise have slow renders. It is recommended that you just look at that example to see how it is done, but these are the basic things to keep in mind: +We have created a [performant column resizing example](../framework/react/examples/column-resizing-performant) that demonstrates how to achieve 60 fps column resizing renders with a complex table that may otherwise have slow renders. It is recommended that you just look at that example to see how it is done, but these are the basic things to keep in mind: 1. Don't use `column.getSize()` on every header and every data cell. Instead, calculate all column widths once upfront, **memoized**! 2. Memoize your Table Body while resizing is in progress. diff --git a/docs/guide/column-visibility.md b/docs/guide/column-visibility.md index 90bf314959..c7126063bc 100644 --- a/docs/guide/column-visibility.md +++ b/docs/guide/column-visibility.md @@ -6,8 +6,8 @@ title: Column Visibility Want to skip to the implementation? Check out these examples: -- [column-visibility](../examples/react/column-visibility) -- [column-ordering](../examples/react/column-ordering) +- [column-visibility](../framework/react/examples/column-visibility) +- [column-ordering](../framework/react/examples/column-ordering) ## API diff --git a/docs/guide/expanding.md b/docs/guide/expanding.md index ef499b7eb0..09ec3a554b 100644 --- a/docs/guide/expanding.md +++ b/docs/guide/expanding.md @@ -6,8 +6,8 @@ title: Expanding Want to skip to the implementation? Check out these examples: -- [expanding](../examples/react/expanding) -- [grouping](../examples/react/grouping) +- [expanding](../framework/react/examples/expanding) +- [grouping](../framework/react/examples/grouping) ## API diff --git a/docs/guide/faceted-values.md b/docs/guide/faceted-values.md index ca422dc2dc..89158bf966 100644 --- a/docs/guide/faceted-values.md +++ b/docs/guide/faceted-values.md @@ -6,7 +6,7 @@ title: Faceted Values Want to skip to the implementation? Check out these examples: -- [filters](../examples/react/filters) (includes faceting) +- [filters](../framework/react/examples/filters) (includes faceting) ## API diff --git a/docs/guide/fuzzy-filtering.md b/docs/guide/fuzzy-filtering.md index 3282bb0156..b1bb38fe65 100644 --- a/docs/guide/fuzzy-filtering.md +++ b/docs/guide/fuzzy-filtering.md @@ -6,7 +6,7 @@ title: Fuzzy Filtering Want to skip to the implementation? Check out these examples: -- [filters](../examples/react/filters) +- [filters](../framework/react/examples/filters) ## API diff --git a/docs/guide/global-filtering.md b/docs/guide/global-filtering.md index 4232de90aa..efff065990 100644 --- a/docs/guide/global-filtering.md +++ b/docs/guide/global-filtering.md @@ -6,7 +6,7 @@ title: Global Filtering Want to skip to the implementation? Check out these examples: -- [filters](../examples/react/filters) (includes faceting) +- [filters](../framework/react/examples/filters) (includes faceting) ## API diff --git a/docs/guide/grouping.md b/docs/guide/grouping.md index c9e753c7f5..9f4c02631f 100644 --- a/docs/guide/grouping.md +++ b/docs/guide/grouping.md @@ -6,7 +6,7 @@ title: Grouping Want to skip to the implementation? Check out these examples: -- [grouping](../examples/react/grouping) +- [grouping](../framework/react/examples/grouping) ## API diff --git a/docs/guide/pagination.md b/docs/guide/pagination.md index dafc46d188..4054ba1cb3 100644 --- a/docs/guide/pagination.md +++ b/docs/guide/pagination.md @@ -6,13 +6,13 @@ title: Pagination Want to skip to the implementation? Check out these examples: -- [pagination](../examples/react/pagination) -- [pagination-controlled](../examples/react/pagination-controlled) -- [editable-data](../examples/react/editable-data) -- [expanding](../examples/react/expanding) -- [filters](../examples/react/filters) -- [fully-controlled](../examples/react/fully-controlled) -- [row-selection](../examples/react/row-selection) +- [pagination](../framework/react/examples/pagination) +- [pagination-controlled](../framework/react/examples/pagination-controlled) +- [editable-data](../framework/react/examples/editable-data) +- [expanding](../framework/react/examples/expanding) +- [filters](../framework/react/examples/filters) +- [fully-controlled](../framework/react/examples/fully-controlled) +- [row-selection](../framework/react/examples/row-selection) ## API diff --git a/docs/guide/row-models.md b/docs/guide/row-models.md index cb7eabe8c0..92b6a3a71e 100644 --- a/docs/guide/row-models.md +++ b/docs/guide/row-models.md @@ -90,10 +90,10 @@ For normal rendering use cases, you will probably only need to use the `table.ge - `getPaginationRowModel` - returns a row model that only includes the rows that should be displayed on the current page based on the pagination state. - `getPrePaginationRowModel` - returns a row model without pagination applied (includes all rows). -- `getSelectedRowModel` - returns a row model of all selected rows (but only based on the `data` that was passed to the table). Runs after `getCoreRowModel`. -- `getPreSelectedRowModel` - returns a row model before row selection is applied (Just returns `getCoreRowModel`). -- `getGroupedSelectedRowModel` - returns a row model of selected rows after grouping. Runs after `getSortedRowModel`, which runs after `getGroupedRowModel`, which runs after `getFilteredRowModel`. -- `getFilteredSelectedRowModel` - returns a row model of selected rows after column filtering and global filtering. Runs after `getFilteredRowModel`. +- `getSelectedRowModel` - returns a row model of all selected rows (but only based on the data that was passed to the table). Runs after getCoreRowModel. +- `getPreSelectedRowModel` - returns a row model before row selection is applied (Just returns getCoreRowModel). +- `getGroupedSelectedRowModel` - returns a row model of selected rows after grouping. Runs after getSortedRowModel, which runs after getGroupedRowModel, which runs after getFilteredRowModel. +- `getFilteredSelectedRowModel` - returns a row model of selected rows after column filtering and global filtering. Runs after getFilteredRowModel. ### The Order of Row Model Execution @@ -103,7 +103,7 @@ Internally, this is the order in which each of the row models are applied to the `getCoreRowModel` -> `getFilteredRowModel` -> `getGroupedRowModel` -> `getSortedRowModel` -> `getExpandedRowModel` -> `getPaginationRowModel` -> `getRowModel` -If in any case the respective is disabled or turned off with a `"manual*" table option, the `getPre*RowModel` will be used instead in that step of the process. +If in any case the respective feature is disabled or turned off with a `"manual*"` table option, the `getPre*RowModel` will be used instead in that step of the process. As you can see above, first the data is filtered, then grouped, then sorted, then expanded, and then finally paginated as the final step. diff --git a/docs/guide/row-pinning.md b/docs/guide/row-pinning.md index 1ea99fb689..14803a4c1f 100644 --- a/docs/guide/row-pinning.md +++ b/docs/guide/row-pinning.md @@ -6,7 +6,7 @@ title: Row Pinning Want to skip to the implementation? Check out these examples: -- [row-pinning](../examples/react/row-pinning) +- [row-pinning](../framework/react/examples/row-pinning) ## API diff --git a/docs/guide/row-selection.md b/docs/guide/row-selection.md index 5c0396d428..1be5b5ebf1 100644 --- a/docs/guide/row-selection.md +++ b/docs/guide/row-selection.md @@ -6,9 +6,9 @@ title: Row Selection Want to skip to the implementation? Check out these examples: -- [React row-selection](../examples/react/row-selection) +- [React row-selection](../framework/react/examples/row-selection) - [Vue row-selection](../examples/vue/row-selection) -- [React expanding](../examples/react/expanding) +- [React expanding](../framework/react/examples/expanding) ## API diff --git a/docs/guide/sorting.md b/docs/guide/sorting.md index 7b6e02e85a..6905e34593 100644 --- a/docs/guide/sorting.md +++ b/docs/guide/sorting.md @@ -6,8 +6,8 @@ title: Sorting Want to skip to the implementation? Check out these examples: -- [sorting](../examples/react/sorting) -- [filters](../examples/react/filters) +- [sorting](../framework/react/examples/sorting) +- [filters](../framework/react/examples/filters) ## API diff --git a/docs/guide/virtualization.md b/docs/guide/virtualization.md index ee93500609..22ed45ab28 100644 --- a/docs/guide/virtualization.md +++ b/docs/guide/virtualization.md @@ -6,10 +6,10 @@ title: Virtualization Want to skip to the implementation? Check out these examples: -- [virtualized-columns](../examples/react/virtualized-columns) -- [virtualized-rows (dynamic row height)](../examples/react/virtualized-rows) +- [virtualized-columns](../framework/react/examples/virtualized-columns) +- [virtualized-rows (dynamic row height)](../framework/react/examples/virtualized-rows) - [virtualized-rows (fixed row height)](../../../../virtual/v3/docs/examples/react/table) -- [virtualized-infinite-scrolling](../examples/react/virtualized-infinite-scrolling) +- [virtualized-infinite-scrolling](../framework/react/examples/virtualized-infinite-scrolling) ## API From 3aa9da9a78c2b0f219c01027ac4680c06179ed20 Mon Sep 17 00:00:00 2001 From: Antonio Galindo Date: Wed, 14 Feb 2024 03:14:34 +0100 Subject: [PATCH 03/19] docs: updated mui pagination example (#5341) * chore: updated deprecated prop * chore: add type --- .../material-ui-pagination/src/actions.tsx | 19 ++++++++++++++----- .../react/material-ui-pagination/src/main.tsx | 8 +++++--- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/examples/react/material-ui-pagination/src/actions.tsx b/examples/react/material-ui-pagination/src/actions.tsx index cc5e51ce97..1a6c325dcd 100644 --- a/examples/react/material-ui-pagination/src/actions.tsx +++ b/examples/react/material-ui-pagination/src/actions.tsx @@ -7,24 +7,33 @@ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft' import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight' import LastPageIcon from '@mui/icons-material/LastPage' import { useTheme } from '@mui/material/styles' +import { TablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions' -const TablePaginationActions = (props: any) => { +const TablePaginationActions = (props: TablePaginationActionsProps) => { const theme = useTheme() const { count, page, rowsPerPage, onPageChange } = props - const handleFirstPageButtonClick = (event: any) => { + const handleFirstPageButtonClick = ( + event: React.MouseEvent + ) => { onPageChange(event, 0) } - const handleBackButtonClick = (event: any) => { + const handleBackButtonClick = ( + event: React.MouseEvent + ) => { onPageChange(event, page - 1) } - const handleNextButtonClick = (event: any) => { + const handleNextButtonClick = ( + event: React.MouseEvent + ) => { onPageChange(event, page + 1) } - const handleLastPageButtonClick = (event: any) => { + const handleLastPageButtonClick = ( + event: React.MouseEvent + ) => { onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)) } diff --git a/examples/react/material-ui-pagination/src/main.tsx b/examples/react/material-ui-pagination/src/main.tsx index 9222ad4812..beddb100aa 100644 --- a/examples/react/material-ui-pagination/src/main.tsx +++ b/examples/react/material-ui-pagination/src/main.tsx @@ -177,9 +177,11 @@ function LocalTable({ count={table.getFilteredRowModel().rows.length} rowsPerPage={pageSize} page={pageIndex} - SelectProps={{ - inputProps: { 'aria-label': 'rows per page' }, - native: true, + slotProps={{ + select: { + inputProps: { 'aria-label': 'rows per page' }, + native: true, + }, }} onPageChange={(_, page) => { table.setPageIndex(page) From de1a715daa0baf62013730c6a2b9cdb9687c10ff Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Tue, 13 Feb 2024 23:55:08 -0600 Subject: [PATCH 04/19] feat: new column pinning, sizing, ordering APIs for easier sticky pinning (#5344) * improved memo method to accept depArgs getMemoOptions method to reduce memo boilerplate new ColumnSizing getAfter API (similar to getStart) added memoization to column.getStart method new Ordering column.getIndex API new Ordering column.getIsFirstColumn API new Ordering column.getIsLastColumn API improved table._getPinnedRows memo performance * update column pinning example and docs * update lock file * even better column sizing performance * smaller code --- docs/api/features/column-ordering.md | 26 ++ docs/api/features/column-sizing.md | 18 +- docs/config.json | 4 + docs/guide/column-pinning.md | 71 +++++ docs/guide/virtualization.md | 2 +- examples/react/column-dnd/src/main.tsx | 1 - .../react/column-pinning-sticky/.gitignore | 5 + .../react/column-pinning-sticky/README.md | 6 + .../react/column-pinning-sticky/index.html | 13 + .../react/column-pinning-sticky/package.json | 24 ++ .../react/column-pinning-sticky/src/index.css | 50 ++++ .../react/column-pinning-sticky/src/main.tsx | 266 ++++++++++++++++++ .../column-pinning-sticky/src/makeData.ts | 48 ++++ .../react/column-pinning-sticky/tsconfig.json | 24 ++ .../column-pinning-sticky/vite.config.js | 17 ++ packages/table-core/src/core/cell.ts | 7 +- packages/table-core/src/core/column.ts | 12 +- packages/table-core/src/core/headers.ts | 84 ++---- packages/table-core/src/core/row.ts | 13 +- packages/table-core/src/core/table.ts | 33 +-- .../table-core/src/features/ColumnSizing.ts | 53 ++-- packages/table-core/src/features/Ordering.ts | 109 ++++--- .../table-core/src/features/Pagination.ts | 12 +- packages/table-core/src/features/Pinning.ts | 94 +++---- .../table-core/src/features/RowSelection.ts | 20 +- .../table-core/src/features/Visibility.ts | 31 +- packages/table-core/src/types.ts | 4 +- packages/table-core/src/utils.ts | 31 +- .../table-core/src/utils/getCoreRowModel.ts | 12 +- .../src/utils/getExpandedRowModel.ts | 7 +- .../src/utils/getFacetedMinMaxValues.ts | 10 +- .../src/utils/getFacetedRowModel.ts | 10 +- .../src/utils/getFacetedUniqueValues.ts | 14 +- .../src/utils/getFilteredRowModel.ts | 12 +- .../src/utils/getGroupedRowModel.ts | 18 +- .../src/utils/getPaginationRowModel.ts | 7 +- .../table-core/src/utils/getSortedRowModel.ts | 12 +- pnpm-lock.yaml | 53 ++-- 38 files changed, 873 insertions(+), 360 deletions(-) create mode 100644 examples/react/column-pinning-sticky/.gitignore create mode 100644 examples/react/column-pinning-sticky/README.md create mode 100644 examples/react/column-pinning-sticky/index.html create mode 100644 examples/react/column-pinning-sticky/package.json create mode 100644 examples/react/column-pinning-sticky/src/index.css create mode 100644 examples/react/column-pinning-sticky/src/main.tsx create mode 100644 examples/react/column-pinning-sticky/src/makeData.ts create mode 100644 examples/react/column-pinning-sticky/tsconfig.json create mode 100644 examples/react/column-pinning-sticky/vite.config.js diff --git a/docs/api/features/column-ordering.md b/docs/api/features/column-ordering.md index 6c70d2dd96..48d4f8b77e 100644 --- a/docs/api/features/column-ordering.md +++ b/docs/api/features/column-ordering.md @@ -42,3 +42,29 @@ resetColumnOrder: (defaultState?: boolean) => void ``` Resets the **columnOrder** state to `initialState.columnOrder`, or `true` can be passed to force a default blank state reset to `[]`. + +## Column API + +### `getIndex` + +```tsx +getIndex: (position?: ColumnPinningPosition) => number +``` + +Returns the index of the column in the order of the visible columns. Optionally pass a `position` parameter to get the index of the column in a sub-section of the table. + +### `getIsFirstColumn` + +```tsx +getIsFirstColumn: (position?: ColumnPinningPosition) => boolean +``` + +Returns `true` if the column is the first column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the first in a sub-section of the table. + +### `getIsLastColumn` + +```tsx +getIsLastColumn: (position?: ColumnPinningPosition) => boolean +``` + +Returns `true` if the column is the last column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the last in a sub-section of the table. \ No newline at end of file diff --git a/docs/api/features/column-sizing.md b/docs/api/features/column-sizing.md index 74585d81d1..4c44e21597 100644 --- a/docs/api/features/column-sizing.md +++ b/docs/api/features/column-sizing.md @@ -61,8 +61,6 @@ The maximum allowed size for the column ## Column API -## Table Options - ### `getSize` ```tsx @@ -77,7 +75,19 @@ Returns the current size of the column getStart: (position?: ColumnPinningPosition) => number ``` -Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the column. +Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the column, measuring the size of all preceding columns. + +Useful for sticky or absolute positioning of columns. (e.g. `left` or `transform`) + +### `getAfter` + +```tsx +getAfter: (position?: ColumnPinningPosition) => number +``` + +Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the column, measuring the size of all succeeding columns. + +Useful for sticky or absolute positioning of columns. (e.g. `right` or `transform`) ### `getCanResize` @@ -134,7 +144,7 @@ Returns an event handler function that can be used to resize the header. It can The dragging and release events are automatically handled for you. -## Table API Options +## Table Options ### `enableColumnResizing` diff --git a/docs/config.json b/docs/config.json index d2292ce386..95c0ad6acb 100644 --- a/docs/config.json +++ b/docs/config.json @@ -252,6 +252,10 @@ "to": "framework/react/examples/column-pinning", "label": "Column Pinning" }, + { + "to": "framework/react/examples/column-pinning-sticky", + "label": "Sticky Column Pinning" + }, { "to": "framework/react/examples/column-sizing", "label": "Column Sizing" diff --git a/docs/guide/column-pinning.md b/docs/guide/column-pinning.md index 83bae6eece..eac89ba5d7 100644 --- a/docs/guide/column-pinning.md +++ b/docs/guide/column-pinning.md @@ -7,16 +7,87 @@ title: Column Pinning Want to skip to the implementation? Check out these examples: - [column-pinning](../framework/react/examples/column-pinning) +- [sticky-column-pinning](../framework/react/examples/column-pinning/sticky) - [row-pinning](../framework/react/examples/row-pinning) + ### Other Examples + +- [Svelte column-pinning](../framework/svelte/examples/column-pinning) +- [Vue column-pinning](../framework/vue/examples/column-pinning) + ## API [Pinning API](../api/features/pinning) ## Column Pinning Guide +TanStack Table offers state and APIs helpful for implementing column pinning features in your table UI. You can implement column pinning in multiple ways. You can either split pinned columns into their own separate tables, or you can keep all columns in the same table, but use the pinning state to order the columns correctly and use sticky CSS to pin the columns to the left or right. + +### How Column Pinning Affects Column Order + There are 3 table features that can reorder columns, which happen in the following order: 1. **Column Pinning** - If pinning, columns are split into left, center (unpinned), and right pinned columns. 2. Manual [Column Ordering](../guide/column-ordering) - A manually specified column order is applied. 3. [Grouping](../guide/grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.columnGroupingMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow. + +The only way to change the order of the pinned columns is in the `columnPinning.left` and `columnPinning.right` state itself. `columnOrder` state will only affect the order of the unpinned ("center") columns. + +### Column Pinning State + +Managing the `columnPinning` state is optional, and usually not necessary unless you are adding persistent state features. TanStack Table will already keep track of the column pinning state for you. Manage the `columnPinning` state just like any other table state if you need to. + +```jsx +const [columnPinning, setColumnPinning] = useState({ + left: [], + right: [], +}); +//... +const table = useReactTable({ + //... + state: { + columnPinning, + //... + } + onColumnPinningChange: setColumnPinning, + //... +}); +``` + +### Pin Columns by Default + +A very common use case is to pin some columns by default. You can do this by either initializing the `columnPinning` state with the pinned columnIds, or by using the `initialState` table option + +```jsx +const table = useReactTable({ + //... + initialState: { + columnPinning: { + left: ['expand-column'], + right: ['actions-column'], + }, + //... + } + //... +}); +``` + +### Useful Column Pinning APIs + +> Note: Some of these APIs are new in v8.12.0 + +There are a handful of useful Column API methods to help you implement column pinning features: + +- [`column.getCanPin`](../api/features/pinning#getcanpin): Use to determine if a column can be pinned. +- [`column.pin`](../api/features/pinning#pin): Use to pin a column to the left or right. Or use to unpin a column. +- [`column.getIsPinned`](../api/features/pinning#getispinned): Use to determine where a column is pinned. +- [`column.getStart`](../api/features/pinning#getstart): Use to provide the correct `left` CSS value for a pinned column. +- [`column.getAfter`](../api/features/pinning#getafter): Use to provide the correct `right` CSS value for a pinned column. +- [`column.getIsLastColumn`](../api/features/pinning#getislastcolumn): Use to determine if a column is the last column in its pinned group. Useful for adding a box-shadow +- [`column.getIsFirstColumn`](../api/features/pinning#getisfirstcolumn): Use to determine if a column is the first column in its pinned group. Useful for adding a box-shadow + +### Split Table Column Pinning + +If you are just using sticky CSS to pin columns, you can for the most part, just render the table as you normally would with the `table.getHeaderGroups` and `row.getVisibleCells` methods. + +However, if you are splitting up pinned columns into their own separate tables, you can make use of the `table.getLeftHeaderGroups`, `table.getCenterHeaderGroups`, `table.getRightHeaderGroups`, `row.getLeftVisibleCells`, `row.getCenterVisibleCells`, and `row.getRightVisibleCells` methods to only render the columns that are relevant to the current table. diff --git a/docs/guide/virtualization.md b/docs/guide/virtualization.md index 22ed45ab28..6abedd5383 100644 --- a/docs/guide/virtualization.md +++ b/docs/guide/virtualization.md @@ -8,7 +8,7 @@ Want to skip to the implementation? Check out these examples: - [virtualized-columns](../framework/react/examples/virtualized-columns) - [virtualized-rows (dynamic row height)](../framework/react/examples/virtualized-rows) -- [virtualized-rows (fixed row height)](../../../../virtual/v3/docs/examples/react/table) +- [virtualized-rows (fixed row height)](../../../../virtual/v3/docs/framework/react/examples/table) - [virtualized-infinite-scrolling](../framework/react/examples/virtualized-infinite-scrolling) ## API diff --git a/examples/react/column-dnd/src/main.tsx b/examples/react/column-dnd/src/main.tsx index 52fb33ad55..00ab143231 100644 --- a/examples/react/column-dnd/src/main.tsx +++ b/examples/react/column-dnd/src/main.tsx @@ -39,7 +39,6 @@ const defaultColumns: ColumnDef[] = [ header: 'Age', footer: props => props.column.id, }, - { accessorKey: 'visits', id: 'visits', diff --git a/examples/react/column-pinning-sticky/.gitignore b/examples/react/column-pinning-sticky/.gitignore new file mode 100644 index 0000000000..d451ff16c1 --- /dev/null +++ b/examples/react/column-pinning-sticky/.gitignore @@ -0,0 +1,5 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local diff --git a/examples/react/column-pinning-sticky/README.md b/examples/react/column-pinning-sticky/README.md new file mode 100644 index 0000000000..b168d3c4b1 --- /dev/null +++ b/examples/react/column-pinning-sticky/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/react/column-pinning-sticky/index.html b/examples/react/column-pinning-sticky/index.html new file mode 100644 index 0000000000..3fc40c9367 --- /dev/null +++ b/examples/react/column-pinning-sticky/index.html @@ -0,0 +1,13 @@ + + + + + + Vite App + + + +
+ + + diff --git a/examples/react/column-pinning-sticky/package.json b/examples/react/column-pinning-sticky/package.json new file mode 100644 index 0000000000..067365dc31 --- /dev/null +++ b/examples/react/column-pinning-sticky/package.json @@ -0,0 +1,24 @@ +{ + "name": "tanstack-table-example-column-pinning-sticky", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview --port 3000", + "start": "vite" + }, + "dependencies": { + "@faker-js/faker": "^8.3.1", + "@tanstack/react-table": "^8.11.8", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@rollup/plugin-replace": "^5.0.5", + "@types/react": "^18.2.48", + "@types/react-dom": "^18.2.18", + "@vitejs/plugin-react": "^4.2.1", + "vite": "^5.0.11" + } +} diff --git a/examples/react/column-pinning-sticky/src/index.css b/examples/react/column-pinning-sticky/src/index.css new file mode 100644 index 0000000000..2e804931bd --- /dev/null +++ b/examples/react/column-pinning-sticky/src/index.css @@ -0,0 +1,50 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +.table-container { + border: 1px solid lightgray; + overflow-x: scroll; + width: 100%; + max-width: 960px; + position: relative; +} + +table { + /* box-shadow and borders will not work with positon: sticky otherwise */ + border-collapse: separate !important; + border-spacing: 0; +} + +th { + background-color: lightgray; + border-bottom: 1px solid lightgray; + font-weight: bold; + height: 30px; + padding: 2px 4px; + position: relative; + text-align: center; +} + +td { + background-color: white; + padding: 2px 4px; +} + +.resizer { + background: rgba(0, 0, 0, 0.5); + cursor: col-resize; + height: 100%; + position: absolute; + right: 0; + top: 0; + touch-action: none; + user-select: none; + width: 5px; +} + +.resizer.isResizing { + background: blue; + opacity: 1; +} diff --git a/examples/react/column-pinning-sticky/src/main.tsx b/examples/react/column-pinning-sticky/src/main.tsx new file mode 100644 index 0000000000..4a554cf39b --- /dev/null +++ b/examples/react/column-pinning-sticky/src/main.tsx @@ -0,0 +1,266 @@ +import React, { CSSProperties } from 'react' +import ReactDOM from 'react-dom/client' + +import './index.css' + +import { + Column, + ColumnDef, + flexRender, + getCoreRowModel, + useReactTable, +} from '@tanstack/react-table' +import { makeData, Person } from './makeData' +import { faker } from '@faker-js/faker' + +//These are the important styles to make sticky column pinning work! +//Apply styles like this using your CSS strategy of choice with this kind of logic to head cells, data cells, footer cells, etc. +//View the index.css file for more needed styles such as border-collapse: separate +const getCommonPinningStyles = (column: Column): CSSProperties => { + const isPinned = column.getIsPinned() + const isLastLeftPinnedColumn = + isPinned === 'left' && column.getIsLastColumn('left') + const isFirstRightPinnedColumn = + isPinned === 'right' && column.getIsFirstColumn('right') + + return { + boxShadow: isLastLeftPinnedColumn + ? '-4px 0 4px -4px gray inset' + : isFirstRightPinnedColumn + ? '4px 0 4px -4px gray inset' + : undefined, + left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, + right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, + opacity: isPinned ? 0.95 : 1, + position: isPinned ? 'sticky' : 'relative', + width: column.getSize(), + zIndex: isPinned ? 1 : 0, + } +} + +const defaultColumns: ColumnDef[] = [ + { + accessorKey: 'firstName', + id: 'firstName', + header: 'First Name', + cell: info => info.getValue(), + footer: props => props.column.id, + size: 180, + }, + { + accessorFn: row => row.lastName, + id: 'lastName', + cell: info => info.getValue(), + header: () => Last Name, + footer: props => props.column.id, + size: 180, + }, + { + accessorKey: 'age', + id: 'age', + header: 'Age', + footer: props => props.column.id, + size: 180, + }, + { + accessorKey: 'visits', + id: 'visits', + header: 'Visits', + footer: props => props.column.id, + size: 180, + }, + { + accessorKey: 'status', + id: 'status', + header: 'Status', + footer: props => props.column.id, + size: 180, + }, + { + accessorKey: 'progress', + id: 'progress', + header: 'Profile Progress', + footer: props => props.column.id, + size: 180, + }, +] + +function App() { + const [data, setData] = React.useState(() => makeData(30)) + const [columns] = React.useState(() => [...defaultColumns]) + + const rerender = () => setData(() => makeData(30)) + + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + debugTable: true, + debugHeaders: true, + debugColumns: true, + columnResizeMode: 'onChange', + }) + + const randomizeColumns = () => { + table.setColumnOrder( + faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id)) + ) + } + + return ( +
+
+
+ +
+ {table.getAllLeafColumns().map(column => { + return ( +
+ +
+ ) + })} +
+
+
+ + +
+
+
+ + + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => { + const { column } = header + + return ( + + ) + })} + + ))} + + + {table.getRowModel().rows.map(row => ( + + {row.getVisibleCells().map(cell => { + const { column } = cell + return ( + + ) + })} + + ))} + +
+
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )}{' '} + {/* Demo getIndex behavior */} + {column.getIndex(column.getIsPinned() || 'center')} +
+ {!header.isPlaceholder && header.column.getCanPin() && ( +
+ {header.column.getIsPinned() !== 'left' ? ( + + ) : null} + {header.column.getIsPinned() ? ( + + ) : null} + {header.column.getIsPinned() !== 'right' ? ( + + ) : null} +
+ )} +
header.column.resetSize(), + onMouseDown: header.getResizeHandler(), + onTouchStart: header.getResizeHandler(), + className: `resizer ${ + header.column.getIsResizing() ? 'isResizing' : '' + }`, + }} + /> +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} +
+
+
{JSON.stringify(table.getState().columnPinning, null, 2)}
+
+ ) +} + +const rootElement = document.getElementById('root') +if (!rootElement) throw new Error('Failed to find the root element') + +ReactDOM.createRoot(rootElement).render( + + + +) diff --git a/examples/react/column-pinning-sticky/src/makeData.ts b/examples/react/column-pinning-sticky/src/makeData.ts new file mode 100644 index 0000000000..331dd1eb19 --- /dev/null +++ b/examples/react/column-pinning-sticky/src/makeData.ts @@ -0,0 +1,48 @@ +import { faker } from '@faker-js/faker' + +export type Person = { + firstName: string + lastName: string + age: number + visits: number + progress: number + status: 'relationship' | 'complicated' | 'single' + subRows?: Person[] +} + +const range = (len: number) => { + const arr: number[] = [] + for (let i = 0; i < len; i++) { + arr.push(i) + } + return arr +} + +const newPerson = (): Person => { + return { + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + age: faker.number.int(40), + visits: faker.number.int(1000), + progress: faker.number.int(100), + status: faker.helpers.shuffle([ + 'relationship', + 'complicated', + 'single', + ])[0]!, + } +} + +export function makeData(...lens: number[]) { + const makeDataLevel = (depth = 0): Person[] => { + const len = lens[depth]! + return range(len).map((d): Person => { + return { + ...newPerson(), + subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined, + } + }) + } + + return makeDataLevel() +} diff --git a/examples/react/column-pinning-sticky/tsconfig.json b/examples/react/column-pinning-sticky/tsconfig.json new file mode 100644 index 0000000000..6d545f543f --- /dev/null +++ b/examples/react/column-pinning-sticky/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/examples/react/column-pinning-sticky/vite.config.js b/examples/react/column-pinning-sticky/vite.config.js new file mode 100644 index 0000000000..2e1361723a --- /dev/null +++ b/examples/react/column-pinning-sticky/vite.config.js @@ -0,0 +1,17 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import rollupReplace from '@rollup/plugin-replace' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + rollupReplace({ + preventAssignment: true, + values: { + __DEV__: JSON.stringify(true), + 'process.env.NODE_ENV': JSON.stringify('development'), + }, + }), + react(), + ], +}) diff --git a/packages/table-core/src/core/cell.ts b/packages/table-core/src/core/cell.ts index f84da80f7f..bacd6622e4 100644 --- a/packages/table-core/src/core/cell.ts +++ b/packages/table-core/src/core/cell.ts @@ -1,5 +1,5 @@ import { RowData, Cell, Column, Row, Table } from '../types' -import { Getter, memo } from '../utils' +import { Getter, getMemoOptions, memo } from '../utils' export interface CellContext { cell: Cell @@ -74,10 +74,7 @@ export function createCell( getValue: cell.getValue, renderValue: cell.renderValue, }), - { - key: process.env.NODE_ENV === 'development' && 'cell.getContext', - debug: () => table.options.debugAll, - } + getMemoOptions(table.options, 'debugCells', 'cell.getContext') ), } diff --git a/packages/table-core/src/core/column.ts b/packages/table-core/src/core/column.ts index fddca5afe3..1d6d57e9ff 100644 --- a/packages/table-core/src/core/column.ts +++ b/packages/table-core/src/core/column.ts @@ -6,7 +6,7 @@ import { RowData, ColumnDefResolved, } from '../types' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' export interface CoreColumn { /** @@ -137,10 +137,7 @@ export function createColumn( ...column.columns?.flatMap(d => d.getFlatColumns()), ] }, - { - key: process.env.NODE_ENV === 'production' && 'column.getFlatColumns', - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(table.options, 'debugColumns', 'column.getFlatColumns') ), getLeafColumns: memo( () => [table._getOrderColumnsFn()], @@ -155,10 +152,7 @@ export function createColumn( return [column as Column] }, - { - key: process.env.NODE_ENV === 'production' && 'column.getLeafColumns', - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(table.options, 'debugColumns', 'column.getLeafColumns') ), } diff --git a/packages/table-core/src/core/headers.ts b/packages/table-core/src/core/headers.ts index 3c8dc12dd6..448ffc1e59 100644 --- a/packages/table-core/src/core/headers.ts +++ b/packages/table-core/src/core/headers.ts @@ -1,7 +1,9 @@ import { RowData, Column, Header, HeaderGroup, Table } from '../types' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' import { TableFeature } from './table' +const debug = 'debugHeaders' + export interface CoreHeaderGroup { depth: number headers: Header[] @@ -288,10 +290,7 @@ export const Headers: TableFeature = { return headerGroups }, - { - key: process.env.NODE_ENV === 'development' && 'getHeaderGroups', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getHeaderGroups') ) table.getCenterHeaderGroups = memo( @@ -307,10 +306,7 @@ export const Headers: TableFeature = { ) return buildHeaderGroups(allColumns, leafColumns, table, 'center') }, - { - key: process.env.NODE_ENV === 'development' && 'getCenterHeaderGroups', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getCenterHeaderGroups') ) table.getLeftHeaderGroups = memo( @@ -327,10 +323,7 @@ export const Headers: TableFeature = { return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'left') }, - { - key: process.env.NODE_ENV === 'development' && 'getLeftHeaderGroups', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getLeftHeaderGroups') ) table.getRightHeaderGroups = memo( @@ -347,10 +340,7 @@ export const Headers: TableFeature = { return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'right') }, - { - key: process.env.NODE_ENV === 'development' && 'getRightHeaderGroups', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getRightHeaderGroups') ) // Footer Groups @@ -360,10 +350,7 @@ export const Headers: TableFeature = { headerGroups => { return [...headerGroups].reverse() }, - { - key: process.env.NODE_ENV === 'development' && 'getFooterGroups', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getFooterGroups') ) table.getLeftFooterGroups = memo( @@ -371,10 +358,7 @@ export const Headers: TableFeature = { headerGroups => { return [...headerGroups].reverse() }, - { - key: process.env.NODE_ENV === 'development' && 'getLeftFooterGroups', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getLeftFooterGroups') ) table.getCenterFooterGroups = memo( @@ -382,10 +366,7 @@ export const Headers: TableFeature = { headerGroups => { return [...headerGroups].reverse() }, - { - key: process.env.NODE_ENV === 'development' && 'getCenterFooterGroups', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getCenterFooterGroups') ) table.getRightFooterGroups = memo( @@ -393,10 +374,7 @@ export const Headers: TableFeature = { headerGroups => { return [...headerGroups].reverse() }, - { - key: process.env.NODE_ENV === 'development' && 'getRightFooterGroups', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getRightFooterGroups') ) // Flat Headers @@ -410,10 +388,7 @@ export const Headers: TableFeature = { }) .flat() }, - { - key: process.env.NODE_ENV === 'development' && 'getFlatHeaders', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getFlatHeaders') ) table.getLeftFlatHeaders = memo( @@ -425,10 +400,7 @@ export const Headers: TableFeature = { }) .flat() }, - { - key: process.env.NODE_ENV === 'development' && 'getLeftFlatHeaders', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getLeftFlatHeaders') ) table.getCenterFlatHeaders = memo( @@ -440,10 +412,7 @@ export const Headers: TableFeature = { }) .flat() }, - { - key: process.env.NODE_ENV === 'development' && 'getCenterFlatHeaders', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getCenterFlatHeaders') ) table.getRightFlatHeaders = memo( @@ -455,10 +424,7 @@ export const Headers: TableFeature = { }) .flat() }, - { - key: process.env.NODE_ENV === 'development' && 'getRightFlatHeaders', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getRightFlatHeaders') ) // Leaf Headers @@ -468,10 +434,7 @@ export const Headers: TableFeature = { flatHeaders => { return flatHeaders.filter(header => !header.subHeaders?.length) }, - { - key: process.env.NODE_ENV === 'development' && 'getCenterLeafHeaders', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getCenterLeafHeaders') ) table.getLeftLeafHeaders = memo( @@ -479,10 +442,7 @@ export const Headers: TableFeature = { flatHeaders => { return flatHeaders.filter(header => !header.subHeaders?.length) }, - { - key: process.env.NODE_ENV === 'development' && 'getLeftLeafHeaders', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getLeftLeafHeaders') ) table.getRightLeafHeaders = memo( @@ -490,10 +450,7 @@ export const Headers: TableFeature = { flatHeaders => { return flatHeaders.filter(header => !header.subHeaders?.length) }, - { - key: process.env.NODE_ENV === 'development' && 'getRightLeafHeaders', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getRightLeafHeaders') ) table.getLeafHeaders = memo( @@ -513,10 +470,7 @@ export const Headers: TableFeature = { }) .flat() }, - { - key: process.env.NODE_ENV === 'development' && 'getLeafHeaders', - debug: () => table.options.debugAll ?? table.options.debugHeaders, - } + getMemoOptions(table.options, debug, 'getLeafHeaders') ) }, } diff --git a/packages/table-core/src/core/row.ts b/packages/table-core/src/core/row.ts index 125315d612..3a752897fd 100644 --- a/packages/table-core/src/core/row.ts +++ b/packages/table-core/src/core/row.ts @@ -1,5 +1,5 @@ import { RowData, Cell, Row, Table } from '../types' -import { flattenBy, memo } from '../utils' +import { flattenBy, getMemoOptions, memo } from '../utils' import { createCell } from './cell' export interface CoreRow { @@ -174,10 +174,7 @@ export const createRow = ( return createCell(table, row as Row, column, column.id) }) }, - { - key: process.env.NODE_ENV === 'development' && 'row.getAllCells', - debug: () => table.options.debugAll ?? table.options.debugRows, - } + getMemoOptions(table.options, 'debugRows', 'getAllCells') ), _getAllCellsByColumnId: memo( @@ -191,11 +188,7 @@ export const createRow = ( {} as Record> ) }, - { - key: - process.env.NODE_ENV === 'production' && 'row.getAllCellsByColumnId', - debug: () => table.options.debugAll ?? table.options.debugRows, - } + getMemoOptions(table.options, 'debugRows', 'getAllCellsByColumnId') ), } diff --git a/packages/table-core/src/core/table.ts b/packages/table-core/src/core/table.ts index 14eb7cde8e..4b319ca824 100644 --- a/packages/table-core/src/core/table.ts +++ b/packages/table-core/src/core/table.ts @@ -1,4 +1,4 @@ -import { functionalUpdate, memo, RequiredKeys } from '../utils' +import { functionalUpdate, getMemoOptions, memo, RequiredKeys } from '../utils' import { Updater, @@ -87,6 +87,12 @@ export interface CoreOptions { * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables) */ debugAll?: boolean + /** + * Set this option to `true` to output cell debugging information to the console. + * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#debugcells] + * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables) + */ + debugCells?: boolean /** * Set this option to `true` to output column debugging information to the console. * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#debugcolumns) @@ -422,10 +428,7 @@ export function createTable( ...defaultColumn, } as Partial> }, - { - debug: () => table.options.debugAll ?? table.options.debugColumns, - key: process.env.NODE_ENV === 'development' && 'getDefaultColumnDef', - } + getMemoOptions(options, 'debugColumns', '_getDefaultColumnDef') ), _getColumnDefs: () => table.options.columns, @@ -456,10 +459,7 @@ export function createTable( return recurseColumns(columnDefs) }, - { - key: process.env.NODE_ENV === 'development' && 'getAllColumns', - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(options, 'debugColumns', 'getAllColumns') ), getAllFlatColumns: memo( @@ -469,10 +469,7 @@ export function createTable( return column.getFlatColumns() }) }, - { - key: process.env.NODE_ENV === 'development' && 'getAllFlatColumns', - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(options, 'debugColumns', 'getAllFlatColumns') ), _getAllFlatColumnsById: memo( @@ -486,10 +483,7 @@ export function createTable( {} as Record> ) }, - { - key: process.env.NODE_ENV === 'development' && 'getAllFlatColumnsById', - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(options, 'debugColumns', 'getAllFlatColumnsById') ), getAllLeafColumns: memo( @@ -498,10 +492,7 @@ export function createTable( let leafColumns = allColumns.flatMap(column => column.getLeafColumns()) return orderColumns(leafColumns) }, - { - key: process.env.NODE_ENV === 'development' && 'getAllLeafColumns', - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(options, 'debugColumns', 'getAllLeafColumns') ), getColumn: columnId => { diff --git a/packages/table-core/src/features/ColumnSizing.ts b/packages/table-core/src/features/ColumnSizing.ts index 2455229e9c..4c29d37bd4 100644 --- a/packages/table-core/src/features/ColumnSizing.ts +++ b/packages/table-core/src/features/ColumnSizing.ts @@ -1,6 +1,7 @@ +import { _getVisibleLeafColumns } from '..' import { TableFeature } from '../core/table' import { RowData, Column, Header, OnChangeFn, Table, Updater } from '../types' -import { makeStateUpdater } from '../utils' +import { getMemoOptions, makeStateUpdater, memo } from '../utils' import { ColumnPinningPosition } from './Pinning' // @@ -164,11 +165,15 @@ export interface ColumnSizingColumn { */ getSize: () => number /** - * Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all preceding headers. + * Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all preceding (left) headers in relation to the current column. * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#getstart) * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing) */ - getStart: (position?: ColumnPinningPosition) => number + getStart: (position?: ColumnPinningPosition | 'center') => number + /** + * Returns the offset measurement along the row-axis (usually the x-axis for standard tables) for the header. This is effectively a sum of the offset measurements of all succeeding (right) headers in relation to the current column. + */ + getAfter: (position?: ColumnPinningPosition | 'center') => number /** * Resets the column to its initial size. * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#resetsize) @@ -257,25 +262,33 @@ export const ColumnSizing: TableFeature = { column.columnDef.maxSize ?? defaultColumnSizing.maxSize ) } - column.getStart = position => { - const columns = !position - ? table.getVisibleLeafColumns() - : position === 'left' - ? table.getLeftVisibleLeafColumns() - : table.getRightVisibleLeafColumns() - - const index = columns.findIndex(d => d.id === column.id) - if (index > 0) { - const prevSiblingColumn = columns[index - 1]! + column.getStart = memo( + position => [ + position, + _getVisibleLeafColumns(table, position), + table.getState().columnSizing, + ], + (position, columns) => + columns + .slice(0, column.getIndex(position)) + .reduce((sum, column) => sum + column.getSize(), 0), + getMemoOptions(table.options, 'debugColumns', 'getStart') + ) + + column.getAfter = memo( + position => [ + position, + _getVisibleLeafColumns(table, position), + table.getState().columnSizing, + ], + (position, columns) => + columns + .slice(column.getIndex(position) + 1) + .reduce((sum, column) => sum + column.getSize(), 0), + getMemoOptions(table.options, 'debugColumns', 'getAfter') + ) - return ( - prevSiblingColumn.getStart(position) + prevSiblingColumn.getSize() - ) - } - - return 0 - } column.resetSize = () => { table.setColumnSizing(({ [column.id]: _, ...rest }) => { return rest diff --git a/packages/table-core/src/features/Ordering.ts b/packages/table-core/src/features/Ordering.ts index 80ff8287c5..238a6c2a55 100644 --- a/packages/table-core/src/features/Ordering.ts +++ b/packages/table-core/src/features/Ordering.ts @@ -1,9 +1,10 @@ -import { makeStateUpdater, memo } from '../utils' +import { getMemoOptions, makeStateUpdater, memo } from '../utils' import { Table, OnChangeFn, Updater, Column, RowData } from '../types' import { orderColumns } from './Grouping' import { TableFeature } from '../core/table' +import { ColumnPinningPosition, _getVisibleLeafColumns } from '..' export interface ColumnOrderTableState { columnOrder: ColumnOrderState @@ -20,6 +21,27 @@ export interface ColumnOrderOptions { onColumnOrderChange?: OnChangeFn } +export interface ColumnOrderColumn { + /** + * Returns the index of the column in the order of the visible columns. Optionally pass a `position` parameter to get the index of the column in a sub-section of the table + * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-ordering#getindex) + * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-ordering) + */ + getIndex: (position?: ColumnPinningPosition | 'center') => number + /** + * Returns `true` if the column is the first column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the first in a sub-section of the table. + * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-ordering#getisfirstcolumn) + * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-ordering) + */ + getIsFirstColumn: (position?: ColumnPinningPosition | 'center') => boolean + /** + * Returns `true` if the column is the last column in the order of the visible columns. Optionally pass a `position` parameter to check if the column is the last in a sub-section of the table. + * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-ordering#getislastcolumn) + * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-ordering) + */ + getIsLastColumn: (position?: ColumnPinningPosition | 'center') => boolean +} + export interface ColumnOrderDefaultOptions { onColumnOrderChange: OnChangeFn } @@ -60,6 +82,25 @@ export const Ordering: TableFeature = { } }, + createColumn: ( + column: Column, + table: Table + ): void => { + column.getIndex = memo( + position => [_getVisibleLeafColumns(table, position)], + columns => columns.findIndex(d => d.id === column.id), + getMemoOptions(table.options, 'debugColumns', 'getIndex') + ) + column.getIsFirstColumn = position => { + const columns = _getVisibleLeafColumns(table, position) + return columns[0]?.id === column.id + } + column.getIsLastColumn = position => { + const columns = _getVisibleLeafColumns(table, position) + return columns[columns.length - 1]?.id === column.id + } + }, + createTable: (table: Table): void => { table.setColumnOrder = updater => table.options.onColumnOrderChange?.(updater) @@ -74,43 +115,41 @@ export const Ordering: TableFeature = { table.getState().grouping, table.options.groupedColumnMode, ], - (columnOrder, grouping, groupedColumnMode) => columns => { - // Sort grouped columns to the start of the column list - // before the headers are built - let orderedColumns: Column[] = [] - - // If there is no order, return the normal columns - if (!columnOrder?.length) { - orderedColumns = columns - } else { - const columnOrderCopy = [...columnOrder] - - // If there is an order, make a copy of the columns - const columnsCopy = [...columns] - - // And make a new ordered array of the columns - - // Loop over the columns and place them in order into the new array - while (columnsCopy.length && columnOrderCopy.length) { - const targetColumnId = columnOrderCopy.shift() - const foundIndex = columnsCopy.findIndex( - d => d.id === targetColumnId - ) - if (foundIndex > -1) { - orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]!) + (columnOrder, grouping, groupedColumnMode) => + (columns: Column[]) => { + // Sort grouped columns to the start of the column list + // before the headers are built + let orderedColumns: Column[] = [] + + // If there is no order, return the normal columns + if (!columnOrder?.length) { + orderedColumns = columns + } else { + const columnOrderCopy = [...columnOrder] + + // If there is an order, make a copy of the columns + const columnsCopy = [...columns] + + // And make a new ordered array of the columns + + // Loop over the columns and place them in order into the new array + while (columnsCopy.length && columnOrderCopy.length) { + const targetColumnId = columnOrderCopy.shift() + const foundIndex = columnsCopy.findIndex( + d => d.id === targetColumnId + ) + if (foundIndex > -1) { + orderedColumns.push(columnsCopy.splice(foundIndex, 1)[0]!) + } } - } - // If there are any columns left, add them to the end - orderedColumns = [...orderedColumns, ...columnsCopy] - } + // If there are any columns left, add them to the end + orderedColumns = [...orderedColumns, ...columnsCopy] + } - return orderColumns(orderedColumns, grouping, groupedColumnMode) - }, - { - key: process.env.NODE_ENV === 'development' && 'getOrderColumnsFn', - // debug: () => table.options.debugAll ?? table.options.debugTable, - } + return orderColumns(orderedColumns, grouping, groupedColumnMode) + }, + getMemoOptions(table.options, 'debugTable', '_getOrderColumnsFn') ) }, } diff --git a/packages/table-core/src/features/Pagination.ts b/packages/table-core/src/features/Pagination.ts index 9493902d86..a20e9bbebe 100644 --- a/packages/table-core/src/features/Pagination.ts +++ b/packages/table-core/src/features/Pagination.ts @@ -1,6 +1,11 @@ import { TableFeature } from '../core/table' import { OnChangeFn, Table, RowModel, Updater, RowData } from '../types' -import { functionalUpdate, makeStateUpdater, memo } from '../utils' +import { + functionalUpdate, + getMemoOptions, + makeStateUpdater, + memo, +} from '../utils' export interface PaginationState { pageIndex: number @@ -290,10 +295,7 @@ export const Pagination: TableFeature = { } return pageOptions }, - { - key: process.env.NODE_ENV === 'development' && 'getPageOptions', - debug: () => table.options.debugAll ?? table.options.debugTable, - } + getMemoOptions(table.options, 'debugTable', 'getPageOptions') ) table.getCanPreviousPage = () => table.getState().pagination.pageIndex > 0 diff --git a/packages/table-core/src/features/Pinning.ts b/packages/table-core/src/features/Pinning.ts index 77e10dc2f4..f942f1e3df 100644 --- a/packages/table-core/src/features/Pinning.ts +++ b/packages/table-core/src/features/Pinning.ts @@ -8,7 +8,7 @@ import { Cell, RowData, } from '../types' -import { makeStateUpdater, memo } from '../utils' +import { getMemoOptions, makeStateUpdater, memo } from '../utils' export type ColumnPinningPosition = false | 'left' | 'right' export type RowPinningPosition = false | 'top' | 'bottom' @@ -426,11 +426,7 @@ export const Pinning: TableFeature = { return allCells.filter(d => !leftAndRight.includes(d.column.id)) }, - { - key: - process.env.NODE_ENV === 'development' && 'row.getCenterVisibleCells', - debug: () => table.options.debugAll ?? table.options.debugRows, - } + getMemoOptions(table.options, 'debugRows', 'getCenterVisibleCells') ) row.getLeftVisibleCells = memo( () => [row._getAllVisibleCells(), table.getState().columnPinning.left, ,], @@ -442,11 +438,7 @@ export const Pinning: TableFeature = { return cells }, - { - key: - process.env.NODE_ENV === 'development' && 'row.getLeftVisibleCells', - debug: () => table.options.debugAll ?? table.options.debugRows, - } + getMemoOptions(table.options, 'debugRows', 'getLeftVisibleCells') ) row.getRightVisibleCells = memo( () => [row._getAllVisibleCells(), table.getState().columnPinning.right], @@ -458,11 +450,7 @@ export const Pinning: TableFeature = { return cells }, - { - key: - process.env.NODE_ENV === 'development' && 'row.getRightVisibleCells', - debug: () => table.options.debugAll ?? table.options.debugRows, - } + getMemoOptions(table.options, 'debugRows', 'getRightVisibleCells') ) }, @@ -493,10 +481,7 @@ export const Pinning: TableFeature = { .map(columnId => allColumns.find(column => column.id === columnId)!) .filter(Boolean) }, - { - key: process.env.NODE_ENV === 'development' && 'getLeftLeafColumns', - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(table.options, 'debugColumns', 'getLeftLeafColumns') ) table.getRightLeafColumns = memo( @@ -506,10 +491,7 @@ export const Pinning: TableFeature = { .map(columnId => allColumns.find(column => column.id === columnId)!) .filter(Boolean) }, - { - key: process.env.NODE_ENV === 'development' && 'getRightLeafColumns', - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(table.options, 'debugColumns', 'getRightLeafColumns') ) table.getCenterLeafColumns = memo( @@ -523,10 +505,7 @@ export const Pinning: TableFeature = { return allColumns.filter(d => !leftAndRight.includes(d.id)) }, - { - key: process.env.NODE_ENV === 'development' && 'getCenterLeafColumns', - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(table.options, 'debugColumns', 'getCenterLeafColumns') ) table.setRowPinning = updater => table.options.onRowPinningChange?.(updater) @@ -547,34 +526,32 @@ export const Pinning: TableFeature = { return Boolean(pinningState[position]?.length) } - table._getPinnedRows = (position: 'top' | 'bottom') => - memo( - () => [table.getRowModel().rows, table.getState().rowPinning[position]], - (visibleRows, pinnedRowIds) => { - const rows = - table.options.keepPinnedRows ?? true - ? //get all rows that are pinned even if they would not be otherwise visible - //account for expanded parent rows, but not pagination or filtering - (pinnedRowIds ?? []).map(rowId => { - const row = table.getRow(rowId, true) - return row.getIsAllParentsExpanded() ? row : null - }) - : //else get only visible rows that are pinned - (pinnedRowIds ?? []).map( - rowId => visibleRows.find(row => row.id === rowId)! - ) - - return rows - .filter(Boolean) - .map(d => ({ ...d, position })) as Row[] - }, - { - key: - process.env.NODE_ENV === 'development' && - `row.get${position === 'top' ? 'Top' : 'Bottom'}Rows`, - debug: () => table.options.debugAll ?? table.options.debugRows, - } - )() + table._getPinnedRows = memo( + position => [ + table.getRowModel().rows, + table.getState().rowPinning[position!], + position, + ], + (visibleRows, pinnedRowIds, position) => { + const rows = + table.options.keepPinnedRows ?? true + ? //get all rows that are pinned even if they would not be otherwise visible + //account for expanded parent rows, but not pagination or filtering + (pinnedRowIds ?? []).map(rowId => { + const row = table.getRow(rowId, true) + return row.getIsAllParentsExpanded() ? row : null + }) + : //else get only visible rows that are pinned + (pinnedRowIds ?? []).map( + rowId => visibleRows.find(row => row.id === rowId)! + ) + + return rows + .filter(Boolean) + .map(d => ({ ...d, position })) as Row[] + }, + getMemoOptions(table.options, 'debugRows', '_getPinnedRows') + ) table.getTopRows = () => table._getPinnedRows('top') @@ -590,10 +567,7 @@ export const Pinning: TableFeature = { const topAndBottom = new Set([...(top ?? []), ...(bottom ?? [])]) return allRows.filter(d => !topAndBottom.has(d.id)) }, - { - key: process.env.NODE_ENV === 'development' && 'row.getCenterRows', - debug: () => table.options.debugAll ?? table.options.debugRows, - } + getMemoOptions(table.options, 'debugRows', 'getCenterRows') ) }, } diff --git a/packages/table-core/src/features/RowSelection.ts b/packages/table-core/src/features/RowSelection.ts index efb927600b..4503081c2a 100644 --- a/packages/table-core/src/features/RowSelection.ts +++ b/packages/table-core/src/features/RowSelection.ts @@ -1,6 +1,6 @@ import { TableFeature } from '../core/table' import { OnChangeFn, Table, Row, RowModel, Updater, RowData } from '../types' -import { makeStateUpdater, memo } from '../utils' +import { getMemoOptions, makeStateUpdater, memo } from '../utils' export type RowSelectionState = Record @@ -333,10 +333,7 @@ export const RowSelection: TableFeature = { return selectRowsFn(table, rowModel) }, - { - key: process.env.NODE_ENV === 'development' && 'getSelectedRowModel', - debug: () => table.options.debugAll ?? table.options.debugTable, - } + getMemoOptions(table.options, 'debugTable', 'getSelectedRowModel') ) table.getFilteredSelectedRowModel = memo( @@ -352,12 +349,7 @@ export const RowSelection: TableFeature = { return selectRowsFn(table, rowModel) }, - { - key: - process.env.NODE_ENV === 'production' && - 'getFilteredSelectedRowModel', - debug: () => table.options.debugAll ?? table.options.debugTable, - } + getMemoOptions(table.options, 'debugTable', 'getFilteredSelectedRowModel') ) table.getGroupedSelectedRowModel = memo( @@ -373,11 +365,7 @@ export const RowSelection: TableFeature = { return selectRowsFn(table, rowModel) }, - { - key: - process.env.NODE_ENV === 'production' && 'getGroupedSelectedRowModel', - debug: () => table.options.debugAll ?? table.options.debugTable, - } + getMemoOptions(table.options, 'debugTable', 'getGroupedSelectedRowModel') ) /// diff --git a/packages/table-core/src/features/Visibility.ts b/packages/table-core/src/features/Visibility.ts index 2deb419192..c54069a8b4 100644 --- a/packages/table-core/src/features/Visibility.ts +++ b/packages/table-core/src/features/Visibility.ts @@ -1,3 +1,4 @@ +import { ColumnPinningPosition } from '..' import { TableFeature } from '../core/table' import { Cell, @@ -8,7 +9,7 @@ import { Row, RowData, } from '../types' -import { makeStateUpdater, memo } from '../utils' +import { getMemoOptions, makeStateUpdater, memo } from '../utils' export type VisibilityState = Record @@ -199,10 +200,7 @@ export const Visibility: TableFeature = { cells => { return cells.filter(cell => cell.column.getIsVisible()) }, - { - key: process.env.NODE_ENV === 'production' && 'row._getAllVisibleCells', - debug: () => table.options.debugAll ?? table.options.debugRows, - } + getMemoOptions(table.options, 'debugRows', '_getAllVisibleCells') ) row.getVisibleCells = memo( () => [ @@ -211,10 +209,7 @@ export const Visibility: TableFeature = { row.getRightVisibleCells(), ], (left, center, right) => [...left, ...center, ...right], - { - key: process.env.NODE_ENV === 'development' && 'row.getVisibleCells', - debug: () => table.options.debugAll ?? table.options.debugRows, - } + getMemoOptions(table.options, 'debugRows', 'getVisibleCells') ) }, @@ -234,10 +229,7 @@ export const Visibility: TableFeature = { columns => { return columns.filter(d => d.getIsVisible?.()) }, - { - key, - debug: () => table.options.debugAll ?? table.options.debugColumns, - } + getMemoOptions(table.options, 'debugColumns', key) ) } @@ -300,3 +292,16 @@ export const Visibility: TableFeature = { } }, } + +export function _getVisibleLeafColumns( + table: Table, + position?: ColumnPinningPosition | 'center' +) { + return !position + ? table.getVisibleLeafColumns() + : position === 'center' + ? table.getCenterVisibleLeafColumns() + : position === 'left' + ? table.getLeftVisibleLeafColumns() + : table.getRightVisibleLeafColumns() +} diff --git a/packages/table-core/src/types.ts b/packages/table-core/src/types.ts index ba022c1ffb..1f4834f068 100644 --- a/packages/table-core/src/types.ts +++ b/packages/table-core/src/types.ts @@ -8,6 +8,7 @@ import { VisibilityRow, } from './features/Visibility' import { + ColumnOrderColumn, ColumnOrderInstance, ColumnOrderOptions, ColumnOrderTableState, @@ -304,7 +305,8 @@ export interface Column FiltersColumn, SortingColumn, GroupingColumn, - ColumnSizingColumn {} + ColumnSizingColumn, + ColumnOrderColumn {} export interface Cell extends CoreCell, diff --git a/packages/table-core/src/utils.ts b/packages/table-core/src/utils.ts index e59bee8201..0caef6567b 100755 --- a/packages/table-core/src/utils.ts +++ b/packages/table-core/src/utils.ts @@ -1,4 +1,4 @@ -import { TableState, Updater } from './types' +import { TableOptionsResolved, TableState, Updater } from './types' export type PartialKeys = Omit & Partial> export type RequiredKeys = Omit & @@ -134,23 +134,23 @@ export function flattenBy( return flat } -export function memo( - getDeps: () => [...TDeps], +export function memo( + getDeps: (depArgs?: TDepArgs) => [...TDeps], fn: (...args: NoInfer<[...TDeps]>) => TResult, opts: { key: any debug?: () => any onChange?: (result: TResult) => void } -): () => TResult { +): (depArgs?: TDepArgs) => TResult { let deps: any[] = [] let result: TResult | undefined - return () => { + return depArgs => { let depTime: number if (opts.key && opts.debug) depTime = Date.now() - const newDeps = getDeps() + const newDeps = getDeps(depArgs) const depsChanged = newDeps.length !== deps.length || @@ -199,3 +199,22 @@ export function memo( return result! } } + +export function getMemoOptions( + tableOptions: Partial>, + debugLevel: + | 'debugAll' + | 'debugCells' + | 'debugTable' + | 'debugColumns' + | 'debugRows' + | 'debugHeaders', + key: string, + onChange?: (result: any) => void +) { + return { + debug: () => tableOptions?.debugAll ?? tableOptions[debugLevel], + key: process.env.NODE_ENV === 'development' && key, + onChange, + } +} diff --git a/packages/table-core/src/utils/getCoreRowModel.ts b/packages/table-core/src/utils/getCoreRowModel.ts index a503c41490..e6f7349a27 100644 --- a/packages/table-core/src/utils/getCoreRowModel.ts +++ b/packages/table-core/src/utils/getCoreRowModel.ts @@ -1,6 +1,6 @@ import { createRow } from '../core/row' import { Table, Row, RowModel, RowData } from '../types' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' export function getCoreRowModel(): ( table: Table @@ -75,12 +75,8 @@ export function getCoreRowModel(): ( return rowModel }, - { - key: process.env.NODE_ENV === 'development' && 'getRowModel', - debug: () => table.options.debugAll ?? table.options.debugTable, - onChange: () => { - table._autoResetPageIndex() - }, - } + getMemoOptions(table.options, 'debugTable', 'getRowModel', () => + table._autoResetPageIndex() + ) ) } diff --git a/packages/table-core/src/utils/getExpandedRowModel.ts b/packages/table-core/src/utils/getExpandedRowModel.ts index c93ad12e2f..2890b6e7f3 100644 --- a/packages/table-core/src/utils/getExpandedRowModel.ts +++ b/packages/table-core/src/utils/getExpandedRowModel.ts @@ -1,5 +1,5 @@ import { Table, Row, RowModel, RowData } from '../types' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' export function getExpandedRowModel(): ( table: Table @@ -26,10 +26,7 @@ export function getExpandedRowModel(): ( return expandRows(rowModel) }, - { - key: process.env.NODE_ENV === 'development' && 'getExpandedRowModel', - debug: () => table.options.debugAll ?? table.options.debugTable, - } + getMemoOptions(table.options, 'debugTable', 'getExpandedRowModel') ) } diff --git a/packages/table-core/src/utils/getFacetedMinMaxValues.ts b/packages/table-core/src/utils/getFacetedMinMaxValues.ts index 46da751345..30ea1ec724 100644 --- a/packages/table-core/src/utils/getFacetedMinMaxValues.ts +++ b/packages/table-core/src/utils/getFacetedMinMaxValues.ts @@ -1,5 +1,5 @@ import { Table, RowData } from '../types' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' export function getFacetedMinMaxValues(): ( table: Table, @@ -37,12 +37,6 @@ export function getFacetedMinMaxValues(): ( return facetedMinMaxValues }, - { - key: - process.env.NODE_ENV === 'development' && - 'getFacetedMinMaxValues_' + columnId, - debug: () => table.options.debugAll ?? table.options.debugTable, - onChange: () => {}, - } + getMemoOptions(table.options, 'debugTable', 'getFacetedMinMaxValues') ) } diff --git a/packages/table-core/src/utils/getFacetedRowModel.ts b/packages/table-core/src/utils/getFacetedRowModel.ts index 77704fc7f6..ab0110a469 100644 --- a/packages/table-core/src/utils/getFacetedRowModel.ts +++ b/packages/table-core/src/utils/getFacetedRowModel.ts @@ -1,5 +1,5 @@ import { Table, RowModel, Row, RowData } from '../types' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' import { filterRows } from './filterRowsUtils' export function getFacetedRowModel(): ( @@ -39,12 +39,6 @@ export function getFacetedRowModel(): ( return filterRows(preRowModel.rows, filterRowsImpl, table) }, - { - key: - process.env.NODE_ENV === 'development' && - 'getFacetedRowModel_' + columnId, - debug: () => table.options.debugAll ?? table.options.debugTable, - onChange: () => {}, - } + getMemoOptions(table.options, 'debugTable', 'getFacetedRowModel') ) } diff --git a/packages/table-core/src/utils/getFacetedUniqueValues.ts b/packages/table-core/src/utils/getFacetedUniqueValues.ts index e7d57bfc84..93f957f170 100644 --- a/packages/table-core/src/utils/getFacetedUniqueValues.ts +++ b/packages/table-core/src/utils/getFacetedUniqueValues.ts @@ -1,5 +1,5 @@ import { Table, RowData } from '../types' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' export function getFacetedUniqueValues(): ( table: Table, @@ -33,12 +33,10 @@ export function getFacetedUniqueValues(): ( return facetedUniqueValues }, - { - key: - process.env.NODE_ENV === 'development' && - 'getFacetedUniqueValues_' + columnId, - debug: () => table.options.debugAll ?? table.options.debugTable, - onChange: () => {}, - } + getMemoOptions( + table.options, + 'debugTable', + `getFacetedUniqueValues_${columnId}` + ) ) } diff --git a/packages/table-core/src/utils/getFilteredRowModel.ts b/packages/table-core/src/utils/getFilteredRowModel.ts index a77062f400..e758d8a6ec 100644 --- a/packages/table-core/src/utils/getFilteredRowModel.ts +++ b/packages/table-core/src/utils/getFilteredRowModel.ts @@ -1,6 +1,6 @@ import { ResolvedColumnFilter } from '../features/Filters' import { Table, RowModel, Row, RowData } from '../types' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' import { filterRows } from './filterRowsUtils' export function getFilteredRowModel(): ( @@ -144,12 +144,8 @@ export function getFilteredRowModel(): ( // Filter final rows using all of the active filters return filterRows(rowModel.rows, filterRowsImpl, table) }, - { - key: process.env.NODE_ENV === 'development' && 'getFilteredRowModel', - debug: () => table.options.debugAll ?? table.options.debugTable, - onChange: () => { - table._autoResetPageIndex() - }, - } + getMemoOptions(table.options, 'debugTable', 'getFilteredRowModel', () => + table._autoResetPageIndex() + ) ) } diff --git a/packages/table-core/src/utils/getGroupedRowModel.ts b/packages/table-core/src/utils/getGroupedRowModel.ts index 6736bfefcd..b92befaf95 100644 --- a/packages/table-core/src/utils/getGroupedRowModel.ts +++ b/packages/table-core/src/utils/getGroupedRowModel.ts @@ -1,6 +1,6 @@ import { createRow } from '../core/row' import { Table, Row, RowModel, RowData } from '../types' -import { flattenBy, memo } from '../utils' +import { flattenBy, getMemoOptions, memo } from '../utils' export function getGroupedRowModel(): ( table: Table @@ -156,16 +156,12 @@ export function getGroupedRowModel(): ( rowsById: groupedRowsById, } }, - { - key: process.env.NODE_ENV === 'development' && 'getGroupedRowModel', - debug: () => table.options.debugAll ?? table.options.debugTable, - onChange: () => { - table._queue(() => { - table._autoResetExpanded() - table._autoResetPageIndex() - }) - }, - } + getMemoOptions(table.options, 'debugTable', 'getGroupedRowModel', () => { + table._queue(() => { + table._autoResetExpanded() + table._autoResetPageIndex() + }) + }) ) } diff --git a/packages/table-core/src/utils/getPaginationRowModel.ts b/packages/table-core/src/utils/getPaginationRowModel.ts index ca998025ef..9119a5dc23 100644 --- a/packages/table-core/src/utils/getPaginationRowModel.ts +++ b/packages/table-core/src/utils/getPaginationRowModel.ts @@ -1,5 +1,5 @@ import { Table, RowModel, Row, RowData } from '../types' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' import { expandRows } from './getExpandedRowModel' export function getPaginationRowModel(opts?: { @@ -55,9 +55,6 @@ export function getPaginationRowModel(opts?: { return paginatedRowModel }, - { - key: process.env.NODE_ENV === 'development' && 'getPaginationRowModel', - debug: () => table.options.debugAll ?? table.options.debugTable, - } + getMemoOptions(table.options, 'debugTable', 'getPaginationRowModel') ) } diff --git a/packages/table-core/src/utils/getSortedRowModel.ts b/packages/table-core/src/utils/getSortedRowModel.ts index eab697e26f..7c95bbd699 100644 --- a/packages/table-core/src/utils/getSortedRowModel.ts +++ b/packages/table-core/src/utils/getSortedRowModel.ts @@ -1,6 +1,6 @@ import { Table, Row, RowModel, RowData } from '../types' import { SortingFn } from '../features/Sorting' -import { memo } from '../utils' +import { getMemoOptions, memo } from '../utils' export function getSortedRowModel(): ( table: Table @@ -111,12 +111,8 @@ export function getSortedRowModel(): ( rowsById: rowModel.rowsById, } }, - { - key: process.env.NODE_ENV === 'development' && 'getSortedRowModel', - debug: () => table.options.debugAll ?? table.options.debugTable, - onChange: () => { - table._autoResetPageIndex() - }, - } + getMemoOptions(table.options, 'debugTable', 'getSortedRowModel', () => + table._autoResetPageIndex() + ) ) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 392546c1c7..e918b4ff60 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -315,6 +315,37 @@ importers: specifier: ^5.0.11 version: 5.0.11(@types/node@18.19.7) + examples/react/column-pinning-sticky: + dependencies: + '@faker-js/faker': + specifier: ^8.3.1 + version: 8.3.1 + '@tanstack/react-table': + specifier: ^8.11.8 + version: link:../../../packages/react-table + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + devDependencies: + '@rollup/plugin-replace': + specifier: ^5.0.5 + version: 5.0.5(rollup@4.9.5) + '@types/react': + specifier: ^18.2.48 + version: 18.2.48 + '@types/react-dom': + specifier: ^18.2.18 + version: 18.2.18 + '@vitejs/plugin-react': + specifier: ^4.2.1 + version: 4.2.1(vite@5.0.11) + vite: + specifier: ^5.0.11 + version: 5.0.11(@types/node@18.19.7) + examples/react/column-resizing-performant: dependencies: '@faker-js/faker': @@ -1632,14 +1663,6 @@ packages: resolution: {integrity: sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==} dev: true - /@ampproject/remapping@2.2.0: - resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==} - engines: {node: '>=6.0.0'} - dependencies: - '@jridgewell/gen-mapping': 0.1.1 - '@jridgewell/trace-mapping': 0.3.17 - dev: true - /@ampproject/remapping@2.2.1: resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} engines: {node: '>=6.0.0'} @@ -1672,7 +1695,7 @@ packages: resolution: {integrity: sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==} engines: {node: '>=6.9.0'} dependencies: - '@ampproject/remapping': 2.2.0 + '@ampproject/remapping': 2.2.1 '@babel/code-frame': 7.23.5 '@babel/generator': 7.23.6 '@babel/helper-compilation-targets': 7.23.6 @@ -3381,14 +3404,6 @@ packages: '@sinclair/typebox': 0.27.8 dev: true - /@jridgewell/gen-mapping@0.1.1: - resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==} - engines: {node: '>=6.0.0'} - dependencies: - '@jridgewell/set-array': 1.1.2 - '@jridgewell/sourcemap-codec': 1.4.14 - dev: true - /@jridgewell/gen-mapping@0.3.2: resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} engines: {node: '>=6.0.0'} @@ -8887,8 +8902,8 @@ packages: dependencies: '@types/node': 20.11.2 esbuild: 0.19.10 - postcss: 8.4.32 - rollup: 4.9.2 + postcss: 8.4.33 + rollup: 4.9.5 optionalDependencies: fsevents: 2.3.3 dev: true From d1e287c8e6a71c6cca953daf865851808bca74d1 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Wed, 14 Feb 2024 00:11:48 -0600 Subject: [PATCH 05/19] chore: lenient test condition for slower builds (#5345) --- packages/table-core/__tests__/getGroupedRowModel.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/table-core/__tests__/getGroupedRowModel.test.ts b/packages/table-core/__tests__/getGroupedRowModel.test.ts index c73bfc2d10..5f81d94a6a 100644 --- a/packages/table-core/__tests__/getGroupedRowModel.test.ts +++ b/packages/table-core/__tests__/getGroupedRowModel.test.ts @@ -17,7 +17,7 @@ function generateColumns(people: Person[]): PersonColumn[] { } describe('#getGroupedRowModel', () => { - it('groups 50k rows and 3 grouped columns with clustered data in less than 3 seconds', () => { + it('groups 50k rows and 3 grouped columns with clustered data in less than 5 seconds', () => { const data = makeData(50000) const columns = generateColumns(data) const grouping = ['firstName', 'lastName', 'age'] @@ -46,6 +46,6 @@ describe('#getGroupedRowModel', () => { expect( groupedById['firstName:Fixed>lastName:Name>age:123'].leafRows.length ).toEqual(50000) - expect(end.valueOf() - start.valueOf()).toBeLessThan(3000) + expect(end.valueOf() - start.valueOf()).toBeLessThan(5000) }) }) From da511d9c9901649acca072c24254889589565950 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Wed, 14 Feb 2024 06:15:53 +0000 Subject: [PATCH 06/19] release: v8.12.0 --- examples/react/basic/package.json | 2 +- examples/react/bootstrap/package.json | 2 +- examples/react/column-dnd/package.json | 2 +- examples/react/column-groups/package.json | 2 +- examples/react/column-ordering/package.json | 2 +- .../react/column-pinning-sticky/package.json | 2 +- examples/react/column-pinning/package.json | 2 +- .../column-resizing-performant/package.json | 2 +- examples/react/column-sizing/package.json | 2 +- examples/react/column-visibility/package.json | 2 +- examples/react/editable-data/package.json | 2 +- examples/react/expanding/package.json | 2 +- examples/react/filters/package.json | 2 +- .../full-width-resizable-table/package.json | 2 +- examples/react/full-width-table/package.json | 2 +- examples/react/fully-controlled/package.json | 2 +- examples/react/grouping/package.json | 2 +- examples/react/kitchen-sink/package.json | 2 +- .../react/material-ui-pagination/package.json | 2 +- .../react/pagination-controlled/package.json | 2 +- examples/react/pagination/package.json | 2 +- examples/react/row-dnd/package.json | 2 +- examples/react/row-pinning/package.json | 2 +- examples/react/row-selection/package.json | 2 +- examples/react/sorting/package.json | 2 +- examples/react/sub-components/package.json | 2 +- .../react/virtualized-columns/package.json | 2 +- .../package.json | 2 +- examples/react/virtualized-rows/package.json | 2 +- examples/solid/basic/package.json | 2 +- examples/solid/bootstrap/package.json | 2 +- examples/solid/column-groups/package.json | 2 +- examples/solid/column-ordering/package.json | 2 +- examples/solid/column-visibility/package.json | 2 +- examples/solid/filters/package.json | 2 +- examples/solid/sorting/package.json | 2 +- examples/svelte/basic/package.json | 2 +- examples/svelte/column-groups/package.json | 2 +- examples/svelte/column-ordering/package.json | 2 +- examples/svelte/column-pinning/package.json | 2 +- .../svelte/column-visibility/package.json | 2 +- examples/svelte/sorting/package.json | 2 +- examples/vue/basic/package.json | 2 +- examples/vue/column-ordering/package.json | 2 +- examples/vue/column-pinning/package.json | 2 +- .../vue/pagination-controlled/package.json | 2 +- examples/vue/pagination/package.json | 2 +- examples/vue/row-selection/package.json | 2 +- examples/vue/sorting/package.json | 2 +- packages/react-table-devtools/package.json | 2 +- packages/react-table/package.json | 2 +- packages/solid-table/package.json | 2 +- packages/svelte-table/package.json | 2 +- packages/table-core/package.json | 2 +- packages/vue-table/package.json | 2 +- pnpm-lock.yaml | 102 +++++++++--------- 56 files changed, 106 insertions(+), 106 deletions(-) diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json index 1bf1323051..1f148a5d87 100644 --- a/examples/react/basic/package.json +++ b/examples/react/basic/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/bootstrap/package.json b/examples/react/bootstrap/package.json index d6d57b6318..a92c8f79ae 100644 --- a/examples/react/bootstrap/package.json +++ b/examples/react/bootstrap/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "bootstrap": "^5.3.2", "react": "^18.2.0", "react-bootstrap": "2.9.2", diff --git a/examples/react/column-dnd/package.json b/examples/react/column-dnd/package.json index 2b55d2b15c..114164500e 100644 --- a/examples/react/column-dnd/package.json +++ b/examples/react/column-dnd/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", diff --git a/examples/react/column-groups/package.json b/examples/react/column-groups/package.json index ac54e1b1b7..2ac0d49de0 100644 --- a/examples/react/column-groups/package.json +++ b/examples/react/column-groups/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/column-ordering/package.json b/examples/react/column-ordering/package.json index a8b7bdb440..865652fd80 100644 --- a/examples/react/column-ordering/package.json +++ b/examples/react/column-ordering/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/column-pinning-sticky/package.json b/examples/react/column-pinning-sticky/package.json index 067365dc31..3d3855e535 100644 --- a/examples/react/column-pinning-sticky/package.json +++ b/examples/react/column-pinning-sticky/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/column-pinning/package.json b/examples/react/column-pinning/package.json index 3bcc95d83b..333606c45e 100644 --- a/examples/react/column-pinning/package.json +++ b/examples/react/column-pinning/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/column-resizing-performant/package.json b/examples/react/column-resizing-performant/package.json index dc58329469..9bd3801fa6 100644 --- a/examples/react/column-resizing-performant/package.json +++ b/examples/react/column-resizing-performant/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/column-sizing/package.json b/examples/react/column-sizing/package.json index 193b064c89..4a32d24fd1 100644 --- a/examples/react/column-sizing/package.json +++ b/examples/react/column-sizing/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/column-visibility/package.json b/examples/react/column-visibility/package.json index f52af7c6e3..2851ab0103 100644 --- a/examples/react/column-visibility/package.json +++ b/examples/react/column-visibility/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/editable-data/package.json b/examples/react/editable-data/package.json index ba1f169b65..9140c48040 100644 --- a/examples/react/editable-data/package.json +++ b/examples/react/editable-data/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/expanding/package.json b/examples/react/expanding/package.json index 9cb44ef771..9061eef060 100644 --- a/examples/react/expanding/package.json +++ b/examples/react/expanding/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/filters/package.json b/examples/react/filters/package.json index 105e983733..a9b95aa221 100644 --- a/examples/react/filters/package.json +++ b/examples/react/filters/package.json @@ -11,7 +11,7 @@ "dependencies": { "@faker-js/faker": "^8.3.1", "@tanstack/match-sorter-utils": "^8.11.8", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/full-width-resizable-table/package.json b/examples/react/full-width-resizable-table/package.json index 9e9d00e86c..5c449956dd 100755 --- a/examples/react/full-width-resizable-table/package.json +++ b/examples/react/full-width-resizable-table/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/full-width-table/package.json b/examples/react/full-width-table/package.json index 66c4b64c20..ea6ce04a59 100755 --- a/examples/react/full-width-table/package.json +++ b/examples/react/full-width-table/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/fully-controlled/package.json b/examples/react/fully-controlled/package.json index 79434596f3..42e45c4fb4 100644 --- a/examples/react/fully-controlled/package.json +++ b/examples/react/fully-controlled/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/grouping/package.json b/examples/react/grouping/package.json index 30a201cd5f..4bd6268bdb 100644 --- a/examples/react/grouping/package.json +++ b/examples/react/grouping/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/kitchen-sink/package.json b/examples/react/kitchen-sink/package.json index efc2f8757b..9e97a9cea8 100644 --- a/examples/react/kitchen-sink/package.json +++ b/examples/react/kitchen-sink/package.json @@ -12,7 +12,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@tanstack/match-sorter-utils": "^8.11.8", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/material-ui-pagination/package.json b/examples/react/material-ui-pagination/package.json index d2817c2508..4be0c06c2f 100644 --- a/examples/react/material-ui-pagination/package.json +++ b/examples/react/material-ui-pagination/package.json @@ -13,7 +13,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.4", "@mui/material": "^5.15.4", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/pagination-controlled/package.json b/examples/react/pagination-controlled/package.json index c7393911b2..1c72a0a9ab 100644 --- a/examples/react/pagination-controlled/package.json +++ b/examples/react/pagination-controlled/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-query": "^3.39.3" diff --git a/examples/react/pagination/package.json b/examples/react/pagination/package.json index 3681d2057d..69b9c2112a 100644 --- a/examples/react/pagination/package.json +++ b/examples/react/pagination/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/row-dnd/package.json b/examples/react/row-dnd/package.json index 6a1d748ba8..9533b58ca0 100644 --- a/examples/react/row-dnd/package.json +++ b/examples/react/row-dnd/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", diff --git a/examples/react/row-pinning/package.json b/examples/react/row-pinning/package.json index 12e93ebf96..d9326ce134 100644 --- a/examples/react/row-pinning/package.json +++ b/examples/react/row-pinning/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/row-selection/package.json b/examples/react/row-selection/package.json index ba77d5f82b..98b2ed5e0a 100644 --- a/examples/react/row-selection/package.json +++ b/examples/react/row-selection/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/sorting/package.json b/examples/react/sorting/package.json index 804d9b7248..cf132fe767 100644 --- a/examples/react/sorting/package.json +++ b/examples/react/sorting/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/sub-components/package.json b/examples/react/sub-components/package.json index 24b57446e7..d85e723b70 100644 --- a/examples/react/sub-components/package.json +++ b/examples/react/sub-components/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/react/virtualized-columns/package.json b/examples/react/virtualized-columns/package.json index 68e1db83dc..e633c496b5 100644 --- a/examples/react/virtualized-columns/package.json +++ b/examples/react/virtualized-columns/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "@tanstack/react-virtual": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/virtualized-infinite-scrolling/package.json b/examples/react/virtualized-infinite-scrolling/package.json index da968bceb9..58c15f6add 100644 --- a/examples/react/virtualized-infinite-scrolling/package.json +++ b/examples/react/virtualized-infinite-scrolling/package.json @@ -11,7 +11,7 @@ "dependencies": { "@faker-js/faker": "^8.3.1", "@tanstack/react-query": "5.17.12", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "@tanstack/react-virtual": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/virtualized-rows/package.json b/examples/react/virtualized-rows/package.json index a4bd8903e6..b6b5f07f86 100644 --- a/examples/react/virtualized-rows/package.json +++ b/examples/react/virtualized-rows/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-table": "^8.11.8", + "@tanstack/react-table": "^8.12.0", "@tanstack/react-virtual": "^3.0.1", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/solid/basic/package.json b/examples/solid/basic/package.json index b648ec2232..5139847ee0 100644 --- a/examples/solid/basic/package.json +++ b/examples/solid/basic/package.json @@ -15,7 +15,7 @@ "vite-plugin-solid": "^2.8.0" }, "dependencies": { - "@tanstack/solid-table": "^8.11.8", + "@tanstack/solid-table": "^8.12.0", "solid-js": "^1.8.11" } } diff --git a/examples/solid/bootstrap/package.json b/examples/solid/bootstrap/package.json index 83671e7416..fefcbcac81 100644 --- a/examples/solid/bootstrap/package.json +++ b/examples/solid/bootstrap/package.json @@ -16,7 +16,7 @@ "vite-plugin-solid": "^2.8.0" }, "dependencies": { - "@tanstack/solid-table": "^8.11.8", + "@tanstack/solid-table": "^8.12.0", "bootstrap": "^5.3.2", "solid-bootstrap": "^1.0.19", "solid-js": "^1.8.11" diff --git a/examples/solid/column-groups/package.json b/examples/solid/column-groups/package.json index 9ce7340da9..d73cbd5598 100644 --- a/examples/solid/column-groups/package.json +++ b/examples/solid/column-groups/package.json @@ -15,7 +15,7 @@ "vite-plugin-solid": "^2.8.0" }, "dependencies": { - "@tanstack/solid-table": "^8.11.8", + "@tanstack/solid-table": "^8.12.0", "solid-js": "^1.8.11" } } diff --git a/examples/solid/column-ordering/package.json b/examples/solid/column-ordering/package.json index bc4ebc8ebd..c67dcad584 100644 --- a/examples/solid/column-ordering/package.json +++ b/examples/solid/column-ordering/package.json @@ -16,7 +16,7 @@ "vite-plugin-solid": "^2.8.0" }, "dependencies": { - "@tanstack/solid-table": "^8.11.8", + "@tanstack/solid-table": "^8.12.0", "solid-js": "^1.8.11" } } diff --git a/examples/solid/column-visibility/package.json b/examples/solid/column-visibility/package.json index 048d6af1d7..38523a197e 100644 --- a/examples/solid/column-visibility/package.json +++ b/examples/solid/column-visibility/package.json @@ -15,7 +15,7 @@ "vite-plugin-solid": "^2.8.0" }, "dependencies": { - "@tanstack/solid-table": "^8.11.8", + "@tanstack/solid-table": "^8.12.0", "solid-js": "^1.8.11" } } diff --git a/examples/solid/filters/package.json b/examples/solid/filters/package.json index fa357b9604..fe48eaebd3 100644 --- a/examples/solid/filters/package.json +++ b/examples/solid/filters/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "@solid-primitives/scheduled": "^1.4.1", - "@tanstack/solid-table": "^8.11.8", + "@tanstack/solid-table": "^8.12.0", "solid-js": "^1.8.11" } } diff --git a/examples/solid/sorting/package.json b/examples/solid/sorting/package.json index 3bf91aac24..d1b35e3d3e 100644 --- a/examples/solid/sorting/package.json +++ b/examples/solid/sorting/package.json @@ -16,7 +16,7 @@ "vite-plugin-solid": "^2.8.0" }, "dependencies": { - "@tanstack/solid-table": "^8.11.8", + "@tanstack/solid-table": "^8.12.0", "solid-js": "^1.8.11" } } diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json index e316940d34..b6778ca660 100644 --- a/examples/svelte/basic/package.json +++ b/examples/svelte/basic/package.json @@ -12,7 +12,7 @@ "devDependencies": { "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", - "@tanstack/svelte-table": "^8.11.8", + "@tanstack/svelte-table": "^8.12.0", "@tsconfig/svelte": "^5.0.2", "svelte": "^4.2.8", "svelte-check": "^3.6.3", diff --git a/examples/svelte/column-groups/package.json b/examples/svelte/column-groups/package.json index 932f7d6987..8bcad6d89e 100644 --- a/examples/svelte/column-groups/package.json +++ b/examples/svelte/column-groups/package.json @@ -12,7 +12,7 @@ "devDependencies": { "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", - "@tanstack/svelte-table": "^8.11.8", + "@tanstack/svelte-table": "^8.12.0", "@tsconfig/svelte": "^5.0.2", "svelte": "^4.2.8", "svelte-check": "^3.6.3", diff --git a/examples/svelte/column-ordering/package.json b/examples/svelte/column-ordering/package.json index 82e902040e..cf72c1dfd7 100644 --- a/examples/svelte/column-ordering/package.json +++ b/examples/svelte/column-ordering/package.json @@ -13,7 +13,7 @@ "@faker-js/faker": "^8.3.1", "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", - "@tanstack/svelte-table": "^8.11.8", + "@tanstack/svelte-table": "^8.12.0", "@tsconfig/svelte": "^5.0.2", "svelte": "^4.2.8", "svelte-check": "^3.6.3", diff --git a/examples/svelte/column-pinning/package.json b/examples/svelte/column-pinning/package.json index 1a05d84a89..9936276a93 100644 --- a/examples/svelte/column-pinning/package.json +++ b/examples/svelte/column-pinning/package.json @@ -13,7 +13,7 @@ "@faker-js/faker": "^8.3.1", "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", - "@tanstack/svelte-table": "^8.11.8", + "@tanstack/svelte-table": "^8.12.0", "@tsconfig/svelte": "^5.0.2", "svelte": "^4.2.8", "svelte-check": "^3.6.3", diff --git a/examples/svelte/column-visibility/package.json b/examples/svelte/column-visibility/package.json index f64ebaddcd..ff6b968567 100644 --- a/examples/svelte/column-visibility/package.json +++ b/examples/svelte/column-visibility/package.json @@ -12,7 +12,7 @@ "devDependencies": { "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", - "@tanstack/svelte-table": "^8.11.8", + "@tanstack/svelte-table": "^8.12.0", "@tsconfig/svelte": "^5.0.2", "svelte": "^4.2.8", "svelte-check": "^3.6.3", diff --git a/examples/svelte/sorting/package.json b/examples/svelte/sorting/package.json index bbe9234db4..18c19891da 100644 --- a/examples/svelte/sorting/package.json +++ b/examples/svelte/sorting/package.json @@ -13,7 +13,7 @@ "@faker-js/faker": "^8.3.1", "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", - "@tanstack/svelte-table": "^8.11.8", + "@tanstack/svelte-table": "^8.12.0", "@tsconfig/svelte": "^5.0.2", "svelte": "^4.2.8", "svelte-check": "^3.6.3", diff --git a/examples/vue/basic/package.json b/examples/vue/basic/package.json index 62996385dd..c901d0f2ec 100644 --- a/examples/vue/basic/package.json +++ b/examples/vue/basic/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "vue": "^3.4.14", - "@tanstack/vue-table": "^8.11.8" + "@tanstack/vue-table": "^8.12.0" }, "devDependencies": { "@types/node": "^20.11.2", diff --git a/examples/vue/column-ordering/package.json b/examples/vue/column-ordering/package.json index c5a18cc52c..4fd9ea224d 100644 --- a/examples/vue/column-ordering/package.json +++ b/examples/vue/column-ordering/package.json @@ -9,7 +9,7 @@ "dependencies": { "@faker-js/faker": "^8.3.1", "vue": "^3.4.14", - "@tanstack/vue-table": "^8.11.8" + "@tanstack/vue-table": "^8.12.0" }, "devDependencies": { "@types/node": "^20.11.2", diff --git a/examples/vue/column-pinning/package.json b/examples/vue/column-pinning/package.json index 91519350e9..25d3312fa3 100644 --- a/examples/vue/column-pinning/package.json +++ b/examples/vue/column-pinning/package.json @@ -8,7 +8,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/vue-table": "^8.11.8", + "@tanstack/vue-table": "^8.12.0", "vue": "^3.4.14" }, "devDependencies": { diff --git a/examples/vue/pagination-controlled/package.json b/examples/vue/pagination-controlled/package.json index a3ca3c73cd..cc604ea537 100644 --- a/examples/vue/pagination-controlled/package.json +++ b/examples/vue/pagination-controlled/package.json @@ -11,7 +11,7 @@ "dependencies": { "@faker-js/faker": "^8.3.1", "vue": "^3.4.14", - "@tanstack/vue-table": "^8.11.8" + "@tanstack/vue-table": "^8.12.0" }, "devDependencies": { "@types/node": "^20.11.2", diff --git a/examples/vue/pagination/package.json b/examples/vue/pagination/package.json index a87654d60d..89600259f5 100644 --- a/examples/vue/pagination/package.json +++ b/examples/vue/pagination/package.json @@ -11,7 +11,7 @@ "dependencies": { "vue": "^3.4.14", "@faker-js/faker": "^8.3.1", - "@tanstack/vue-table": "^8.11.8" + "@tanstack/vue-table": "^8.12.0" }, "devDependencies": { "@types/node": "^20.11.2", diff --git a/examples/vue/row-selection/package.json b/examples/vue/row-selection/package.json index f98413ee65..e176621d2c 100644 --- a/examples/vue/row-selection/package.json +++ b/examples/vue/row-selection/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "vue": "^3.4.14", - "@tanstack/vue-table": "^8.11.8" + "@tanstack/vue-table": "^8.12.0" }, "devDependencies": { "@types/node": "^20.11.2", diff --git a/examples/vue/sorting/package.json b/examples/vue/sorting/package.json index aafaff8726..f0e4a7fa13 100644 --- a/examples/vue/sorting/package.json +++ b/examples/vue/sorting/package.json @@ -11,7 +11,7 @@ "dependencies": { "@faker-js/faker": "^8.3.1", "vue": "^3.4.14", - "@tanstack/vue-table": "^8.11.8" + "@tanstack/vue-table": "^8.12.0" }, "devDependencies": { "@types/node": "^20.11.2", diff --git a/packages/react-table-devtools/package.json b/packages/react-table-devtools/package.json index 6d147b8dfa..d324387fa1 100644 --- a/packages/react-table-devtools/package.json +++ b/packages/react-table-devtools/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/react-table-devtools", - "version": "8.11.8", + "version": "8.12.0", "description": "Devtools for React Table", "author": "Tanner Linsley", "license": "MIT", diff --git a/packages/react-table/package.json b/packages/react-table/package.json index 3c174094ca..e00eb40fa3 100644 --- a/packages/react-table/package.json +++ b/packages/react-table/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/react-table", - "version": "8.11.8", + "version": "8.12.0", "description": "Headless UI for building powerful tables & datagrids for React.", "author": "Tanner Linsley", "license": "MIT", diff --git a/packages/solid-table/package.json b/packages/solid-table/package.json index 9d9123e38c..a69853ed7f 100644 --- a/packages/solid-table/package.json +++ b/packages/solid-table/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/solid-table", - "version": "8.11.8", + "version": "8.12.0", "description": "Headless UI for building powerful tables & datagrids for Solid.", "author": "Tanner Linsley", "license": "MIT", diff --git a/packages/svelte-table/package.json b/packages/svelte-table/package.json index 0c7b7e3253..95ecdd9996 100644 --- a/packages/svelte-table/package.json +++ b/packages/svelte-table/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/svelte-table", - "version": "8.11.8", + "version": "8.12.0", "description": "Headless UI for building powerful tables & datagrids for Svelte.", "author": "Tanner Linsley", "license": "MIT", diff --git a/packages/table-core/package.json b/packages/table-core/package.json index 56c7fb920b..0cf8a7fee4 100644 --- a/packages/table-core/package.json +++ b/packages/table-core/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/table-core", - "version": "8.11.8", + "version": "8.12.0", "description": "Headless UI for building powerful tables & datagrids for TS/JS.", "author": "Tanner Linsley", "license": "MIT", diff --git a/packages/vue-table/package.json b/packages/vue-table/package.json index 111b6965e4..e6df0b0e8a 100644 --- a/packages/vue-table/package.json +++ b/packages/vue-table/package.json @@ -1,6 +1,6 @@ { "name": "@tanstack/vue-table", - "version": "8.11.8", + "version": "8.12.0", "description": "Headless UI for building powerful tables & datagrids for Vue.", "author": "Tanner Linsley", "license": "MIT", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e918b4ff60..0ae6f82dfb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -120,7 +120,7 @@ importers: examples/react/basic: dependencies: '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -148,7 +148,7 @@ importers: examples/react/bootstrap: dependencies: '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table bootstrap: specifier: ^5.3.2 @@ -194,7 +194,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -228,7 +228,7 @@ importers: examples/react/column-groups: dependencies: '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -259,7 +259,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -290,7 +290,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -321,7 +321,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -352,7 +352,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -380,7 +380,7 @@ importers: examples/react/column-sizing: dependencies: '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -408,7 +408,7 @@ importers: examples/react/column-visibility: dependencies: '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -439,7 +439,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -470,7 +470,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -504,7 +504,7 @@ importers: specifier: ^8.11.8 version: link:../../../packages/match-sorter-utils '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -535,7 +535,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -566,7 +566,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -597,7 +597,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -628,7 +628,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -665,7 +665,7 @@ importers: specifier: ^8.11.8 version: link:../../../packages/match-sorter-utils '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -714,7 +714,7 @@ importers: specifier: ^5.15.4 version: 5.15.4(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -748,7 +748,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -779,7 +779,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -813,7 +813,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -850,7 +850,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -881,7 +881,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -912,7 +912,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -943,7 +943,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table react: specifier: ^18.2.0 @@ -974,7 +974,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table '@tanstack/react-virtual': specifier: ^3.0.1 @@ -1011,7 +1011,7 @@ importers: specifier: 5.17.12 version: 5.17.12(react@18.2.0) '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table '@tanstack/react-virtual': specifier: ^3.0.1 @@ -1045,7 +1045,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/react-table '@tanstack/react-virtual': specifier: ^3.0.1 @@ -1076,7 +1076,7 @@ importers: examples/solid/basic: dependencies: '@tanstack/solid-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/solid-table solid-js: specifier: ^1.8.11 @@ -1095,7 +1095,7 @@ importers: examples/solid/bootstrap: dependencies: '@tanstack/solid-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/solid-table bootstrap: specifier: ^5.3.2 @@ -1123,7 +1123,7 @@ importers: examples/solid/column-groups: dependencies: '@tanstack/solid-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/solid-table solid-js: specifier: ^1.8.11 @@ -1142,7 +1142,7 @@ importers: examples/solid/column-ordering: dependencies: '@tanstack/solid-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/solid-table solid-js: specifier: ^1.8.11 @@ -1164,7 +1164,7 @@ importers: examples/solid/column-visibility: dependencies: '@tanstack/solid-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/solid-table solid-js: specifier: ^1.8.11 @@ -1186,7 +1186,7 @@ importers: specifier: ^1.4.1 version: 1.4.1(solid-js@1.8.11) '@tanstack/solid-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/solid-table solid-js: specifier: ^1.8.11 @@ -1208,7 +1208,7 @@ importers: examples/solid/sorting: dependencies: '@tanstack/solid-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/solid-table solid-js: specifier: ^1.8.11 @@ -1236,7 +1236,7 @@ importers: specifier: ^3.0.1 version: 3.0.1(svelte@4.2.8)(vite@5.0.11) '@tanstack/svelte-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/svelte-table '@tsconfig/svelte': specifier: ^5.0.2 @@ -1263,7 +1263,7 @@ importers: specifier: ^3.0.1 version: 3.0.1(svelte@4.2.8)(vite@5.0.11) '@tanstack/svelte-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/svelte-table '@tsconfig/svelte': specifier: ^5.0.2 @@ -1293,7 +1293,7 @@ importers: specifier: ^3.0.1 version: 3.0.1(svelte@4.2.8)(vite@5.0.11) '@tanstack/svelte-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/svelte-table '@tsconfig/svelte': specifier: ^5.0.2 @@ -1323,7 +1323,7 @@ importers: specifier: ^3.0.1 version: 3.0.1(svelte@4.2.8)(vite@5.0.11) '@tanstack/svelte-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/svelte-table '@tsconfig/svelte': specifier: ^5.0.2 @@ -1350,7 +1350,7 @@ importers: specifier: ^3.0.1 version: 3.0.1(svelte@4.2.8)(vite@5.0.11) '@tanstack/svelte-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/svelte-table '@tsconfig/svelte': specifier: ^5.0.2 @@ -1380,7 +1380,7 @@ importers: specifier: ^3.0.1 version: 3.0.1(svelte@4.2.8)(vite@5.0.11) '@tanstack/svelte-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/svelte-table '@tsconfig/svelte': specifier: ^5.0.2 @@ -1401,7 +1401,7 @@ importers: examples/vue/basic: dependencies: '@tanstack/vue-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/vue-table vue: specifier: ^3.4.14 @@ -1429,7 +1429,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/vue-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/vue-table vue: specifier: ^3.4.14 @@ -1457,7 +1457,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/vue-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/vue-table vue: specifier: ^3.4.14 @@ -1485,7 +1485,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/vue-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/vue-table vue: specifier: ^3.4.14 @@ -1513,7 +1513,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/vue-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/vue-table vue: specifier: ^3.4.14 @@ -1538,7 +1538,7 @@ importers: examples/vue/row-selection: dependencies: '@tanstack/vue-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/vue-table vue: specifier: ^3.4.14 @@ -1569,7 +1569,7 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/vue-table': - specifier: ^8.11.8 + specifier: ^8.12.0 version: link:../../../packages/vue-table vue: specifier: ^3.4.14 @@ -8902,8 +8902,8 @@ packages: dependencies: '@types/node': 20.11.2 esbuild: 0.19.10 - postcss: 8.4.33 - rollup: 4.9.5 + postcss: 8.4.32 + rollup: 4.9.2 optionalDependencies: fsevents: 2.3.3 dev: true From d155dff35dfe31e32f064ce02d572e516e7cd662 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Wed, 14 Feb 2024 19:30:59 +1100 Subject: [PATCH 07/19] ci: Add read-only Nx cloud access token (#5346) --- nx.json | 1 + 1 file changed, 1 insertion(+) diff --git a/nx.json b/nx.json index 3fdd596781..d1b1d77802 100644 --- a/nx.json +++ b/nx.json @@ -4,6 +4,7 @@ "defaultBase": "main" }, "defaultBase": "main", + "nxCloudAccessToken": "OWExNzViODMtZjU4Ny00MTRmLTk3ZDYtMGY5YzlkOTRhZDQ2fHJlYWQtb25seQ==", "parallel": 5, "namedInputs": { "sharedGlobals": [ From eef7a9946d863b5583b7b402031f329cfde72de8 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Fri, 16 Feb 2024 10:15:15 -0600 Subject: [PATCH 08/19] docs: column ordering guide (#5353) --- docs/guide/column-ordering.md | 78 +++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md index 7a91ede5ff..a83d781cd1 100644 --- a/docs/guide/column-ordering.md +++ b/docs/guide/column-ordering.md @@ -7,6 +7,7 @@ title: Column Ordering Want to skip to the implementation? Check out these examples: - [column-ordering](../framework/react/examples/column-ordering) +- [column-ordering-dnd](../framework/react/examples/column-dnd) ## API @@ -14,8 +15,85 @@ Want to skip to the implementation? Check out these examples: ## Column Ordering Guide +By default, columns are ordered in the order they are defined in the `columns` array. However, you can manually specify the column order using the `columnOrder` state. Other features like column pinning and grouping can also affect the column order. + +### What Affects Column Order + There are 3 table features that can reorder columns, which happen in the following order: 1. [Column Pinning](../guide/column-pinning) - If pinning, columns are split into left, center (unpinned), and right pinned columns. 2. Manual **Column Ordering** - A manually specified column order is applied. 3. [Grouping](../guide/grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.columnGroupingMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow. + +> **Note:** `columnOrder` state will only affect unpinned rows if used in conjunction with column pinning. + +### Column Order State + +If you don't provide a `columnOrder` state, TanStack Table will just use the order of the columns in the `columns` array. However, you can provide an array of string column ids to the `columnOrder` state to specify the order of the columns. + +#### Default Column Order + +If all you need to do is specify the initial column order, you can just specify the `columnOrder` state in the `initialState` table option. + +```jsx +const table = useReactTable({ + //... + initialState: { + columnOrder: ['columnId1', 'columnId2', 'columnId3'], + } + //... +}); +``` + +> **Note:** If you are using the `state` table option to also specify the `columnOrder` state, the `initialState` will have no effect. Only specify particular states in either `initialState` or `state`, not both. + +#### Managing Column Order State + +If you need to dynamically change the column order, or set the column order after the table has been initialized, you can manage the `columnOrder` state just like any other table state. + +```jsx +const [columnOrder, setColumnOrder] = useState(['columnId1', 'columnId2', 'columnId3']); //optionally initialize the column order +//... +const table = useReactTable({ + //... + state: { + columnOrder, + //... + } + onColumnOrderChange: setColumnOrder, + //... +}); +``` + +### Reordering Columns + +If the table has UI that allows the user to reorder columns, you can set up the logic something like this: + +```tsx +const [columnOrder, setColumnOrder] = useState(columns.map(c => c.id)); + +//depending on your dnd solution of choice, you may or may not need state like this +const [movingColumnId, setMovingColumnId] = useState(null); +const [targetColumnId, setTargetColumnId] = useState(null); + +//util function to splice and reorder the columnOrder array +const reorderColumn = ( + movingColumnId: Column, + targetColumnId: Column, +): string[] => { + const newColumnOrder = [...columnOrder]; + newColumnOrder.splice( + newColumnOrder.indexOf(targetColumnId), + 0, + newColumnOrder.splice(newColumnOrder.indexOf(movingColumnId), 1)[0], + ); + setColumnOrder(newColumnOrder); +}; + +const handleDragEnd = (e: DragEvent) => { + if(!movingColumnId || !targetColumnId) return; + setColumnOrder(reorderColumn(movingColumnId, targetColumnId)); +}; + +//use your dnd solution of choice +``` From d7cc714b9a041090f3ee0b5e554f090ed454e799 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Fri, 16 Feb 2024 10:22:28 -0600 Subject: [PATCH 09/19] docs: Update column-ordering.md (#5354) --- docs/guide/column-ordering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md index a83d781cd1..12cf1a2883 100644 --- a/docs/guide/column-ordering.md +++ b/docs/guide/column-ordering.md @@ -25,7 +25,7 @@ There are 3 table features that can reorder columns, which happen in the followi 2. Manual **Column Ordering** - A manually specified column order is applied. 3. [Grouping](../guide/grouping) - If grouping is enabled, a grouping state is active, and `tableOptions.columnGroupingMode` is set to `'reorder' | 'remove'`, then the grouped columns are reordered to the start of the column flow. -> **Note:** `columnOrder` state will only affect unpinned rows if used in conjunction with column pinning. +> **Note:** `columnOrder` state will only affect unpinned columns if used in conjunction with column pinning. ### Column Order State From ef744cba011294339f1471d38af7347516d209fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20B=C3=A1rta?= Date: Fri, 16 Feb 2024 17:23:14 +0100 Subject: [PATCH 10/19] docs: column-pinning docs wrong link (#5349) Fixed wrong link to column-pinning-sticky example. The original link would load the page but the example was not working. --- docs/guide/column-pinning.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/column-pinning.md b/docs/guide/column-pinning.md index eac89ba5d7..dcb6118d0f 100644 --- a/docs/guide/column-pinning.md +++ b/docs/guide/column-pinning.md @@ -7,7 +7,7 @@ title: Column Pinning Want to skip to the implementation? Check out these examples: - [column-pinning](../framework/react/examples/column-pinning) -- [sticky-column-pinning](../framework/react/examples/column-pinning/sticky) +- [sticky-column-pinning](../framework/react/examples/column-pinning-sticky) - [row-pinning](../framework/react/examples/row-pinning) ### Other Examples From 84c079141aff99015637d5c94f2b0c477bcf2ba6 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Fri, 16 Feb 2024 17:18:07 -0600 Subject: [PATCH 11/19] docs: replace react-dnd with dnd-kit in row ordering example (#5355) --- examples/react/row-dnd/package.json | 6 +- examples/react/row-dnd/src/index.css | 1 + examples/react/row-dnd/src/main.tsx | 284 +++++++++++++------------ examples/react/row-dnd/src/makeData.ts | 4 +- pnpm-lock.yaml | 73 ++++++- 5 files changed, 227 insertions(+), 141 deletions(-) diff --git a/examples/react/row-dnd/package.json b/examples/react/row-dnd/package.json index 9533b58ca0..a8b68bedb1 100644 --- a/examples/react/row-dnd/package.json +++ b/examples/react/row-dnd/package.json @@ -9,11 +9,13 @@ "start": "vite" }, "dependencies": { + "@dnd-kit/core": "^6.1.0", + "@dnd-kit/modifiers": "^7.0.0", + "@dnd-kit/sortable": "^8.0.0", + "@dnd-kit/utilities": "^3.2.2", "@faker-js/faker": "^8.3.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", - "react-dnd": "^16.0.1", - "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0" }, "devDependencies": { diff --git a/examples/react/row-dnd/src/index.css b/examples/react/row-dnd/src/index.css index 13cddcd1a5..538251302f 100644 --- a/examples/react/row-dnd/src/index.css +++ b/examples/react/row-dnd/src/index.css @@ -20,6 +20,7 @@ th { td { border-right: 1px solid lightgray; padding: 2px 4px; + background-color: white; } td button { diff --git a/examples/react/row-dnd/src/main.tsx b/examples/react/row-dnd/src/main.tsx index 9a7be35740..dd9d0ebddb 100644 --- a/examples/react/row-dnd/src/main.tsx +++ b/examples/react/row-dnd/src/main.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react' +import React, { CSSProperties } from 'react' import ReactDOM from 'react-dom/client' import './index.css' @@ -12,103 +12,113 @@ import { } from '@tanstack/react-table' import { makeData, Person } from './makeData' -import { DndProvider, useDrag, useDrop } from 'react-dnd' -import { HTML5Backend } from 'react-dnd-html5-backend' +// needed for table body level scope DnD setup +import { + DndContext, + KeyboardSensor, + MouseSensor, + TouchSensor, + closestCenter, + type DragEndEvent, + type UniqueIdentifier, + useSensor, + useSensors, +} from '@dnd-kit/core' +import { restrictToVerticalAxis } from '@dnd-kit/modifiers' +import { + arrayMove, + SortableContext, + verticalListSortingStrategy, +} from '@dnd-kit/sortable' + +// needed for row & cell level scope DnD setup +import { useSortable } from '@dnd-kit/sortable' +import { CSS } from '@dnd-kit/utilities' + +// Cell Component +const RowDragHandleCell = ({ rowId }: { rowId: string }) => { + const { attributes, listeners } = useSortable({ + id: rowId, + }) + return ( + // Alternatively, you could set these attributes on the rows themselves + + ) +} + +// Row Component +const DraggableRow = ({ row }: { row: Row }) => { + const { transform, transition, setNodeRef, isDragging } = useSortable({ + id: row.original.userId, + }) + + const style: CSSProperties = { + transform: CSS.Transform.toString(transform), + transition: transition, //let dnd-kit do its thing + opacity: isDragging ? 0.8 : 1, + zIndex: isDragging ? 1 : 0, + position: 'relative', + } + return ( + // connect row ref to dnd-kit, apply important styles + + {row.getVisibleCells().map(cell => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + ) +} -const defaultColumns: ColumnDef[] = [ - { - header: 'Name', - footer: props => props.column.id, - columns: [ +// Table Component +function App() { + const columns = React.useMemo[]>( + () => [ + // Create a dedicated drag handle column. Alternatively, you could just set up dnd events on the rows themselves. + { + id: 'drag-handle', + header: 'Move', + cell: ({ row }) => , + size: 60, + }, { accessorKey: 'firstName', cell: info => info.getValue(), - footer: props => props.column.id, }, { accessorFn: row => row.lastName, id: 'lastName', cell: info => info.getValue(), header: () => Last Name, - footer: props => props.column.id, }, - ], - }, - { - header: 'Info', - footer: props => props.column.id, - columns: [ { accessorKey: 'age', header: () => 'Age', - footer: props => props.column.id, }, { - header: 'More Info', - columns: [ - { - accessorKey: 'visits', - header: () => Visits, - footer: props => props.column.id, - }, - { - accessorKey: 'status', - header: 'Status', - footer: props => props.column.id, - }, - { - accessorKey: 'progress', - header: 'Profile Progress', - footer: props => props.column.id, - }, - ], + accessorKey: 'visits', + header: () => Visits, + }, + { + accessorKey: 'status', + header: 'Status', + }, + { + accessorKey: 'progress', + header: 'Profile Progress', }, ], - }, -] - -const DraggableRow: FC<{ - row: Row - reorderRow: (draggedRowIndex: number, targetRowIndex: number) => void -}> = ({ row, reorderRow }) => { - const [, dropRef] = useDrop({ - accept: 'row', - drop: (draggedRow: Row) => reorderRow(draggedRow.index, row.index), - }) - - const [{ isDragging }, dragRef, previewRef] = useDrag({ - collect: monitor => ({ - isDragging: monitor.isDragging(), - }), - item: () => row, - type: 'row', - }) - - return ( - - - - - {row.getVisibleCells().map(cell => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - + [] ) -} - -function App() { - const [columns] = React.useState(() => [...defaultColumns]) const [data, setData] = React.useState(() => makeData(20)) - const reorderRow = (draggedRowIndex: number, targetRowIndex: number) => { - data.splice(targetRowIndex, 0, data.splice(draggedRowIndex, 1)[0] as Person) - setData([...data]) - } + const dataIds = React.useMemo( + () => data?.map(({ userId }) => userId), + [data] + ) const rerender = () => setData(() => makeData(20)) @@ -116,63 +126,77 @@ function App() { data, columns, getCoreRowModel: getCoreRowModel(), - getRowId: row => row.userId, //good to have guaranteed unique row ids/keys for rendering + getRowId: row => row.userId, //required because row indexes will change debugTable: true, debugHeaders: true, debugColumns: true, }) + // reorder columns after drag & drop + function handleDragEnd(event: DragEndEvent) { + const { active, over } = event + if (active && over && active.id !== over.id) { + setData(data => { + const oldIndex = dataIds.indexOf(active.id) + const newIndex = dataIds.indexOf(over.id) + return arrayMove(data, oldIndex, newIndex) //this is just a splice util + }) + } + } + + const sensors = useSensors( + useSensor(MouseSensor, {}), + useSensor(TouchSensor, {}), + useSensor(KeyboardSensor, {}) + ) + return ( -
-
-
- -
-
- - - {table.getHeaderGroups().map(headerGroup => ( - - - ))} - - ))} - - - {table.getRowModel().rows.map(row => ( - - ))} - - - {table.getFooterGroups().map(footerGroup => ( - - {footerGroup.headers.map(header => ( - + // NOTE: This provider creates div elements, so don't nest inside of
- {headerGroup.headers.map(header => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} -
- {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.footer, - header.getContext() - )} -
elements + +
+
+
+ +
+
+
+ + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => ( + + ))} + + ))} + + + + {table.getRowModel().rows.map(row => ( + ))} - - ))} - -
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
-
{JSON.stringify(data, null, 2)}
-
+ + + +
{JSON.stringify(data, null, 2)}
+
+ ) } @@ -180,9 +204,7 @@ const rootElement = document.getElementById('root') if (!rootElement) throw new Error('Failed to find the root element') ReactDOM.createRoot(rootElement).render( - // //disabled for react-dnd preview bug for now - + - - // + ) diff --git a/examples/react/row-dnd/src/makeData.ts b/examples/react/row-dnd/src/makeData.ts index 6d811a80f5..26b666d2ae 100644 --- a/examples/react/row-dnd/src/makeData.ts +++ b/examples/react/row-dnd/src/makeData.ts @@ -21,7 +21,7 @@ const range = (len: number) => { const newPerson = (): Person => { return { - userId: faker.datatype.uuid(), + userId: faker.string.uuid(), firstName: faker.person.firstName(), lastName: faker.person.lastName(), age: faker.number.int(40), @@ -38,7 +38,7 @@ const newPerson = (): Person => { export function makeData(...lens: number[]) { const makeDataLevel = (depth = 0): Person[] => { const len = lens[depth]! - return range(len).map((d): Person => { + return range(len).map((_d): Person => { return { ...newPerson(), subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0ae6f82dfb..115e21048d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -809,6 +809,18 @@ importers: examples/react/row-dnd: dependencies: + '@dnd-kit/core': + specifier: ^6.1.0 + version: 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/modifiers': + specifier: ^7.0.0 + version: 7.0.0(@dnd-kit/core@6.1.0)(react@18.2.0) + '@dnd-kit/sortable': + specifier: ^8.0.0 + version: 8.0.0(@dnd-kit/core@6.1.0)(react@18.2.0) + '@dnd-kit/utilities': + specifier: ^3.2.2 + version: 3.2.2(react@18.2.0) '@faker-js/faker': specifier: ^8.3.1 version: 8.3.1 @@ -818,12 +830,6 @@ importers: react: specifier: ^18.2.0 version: 18.2.0 - react-dnd: - specifier: ^16.0.1 - version: 16.0.1(@types/node@18.19.7)(@types/react@18.2.48)(react@18.2.0) - react-dnd-html5-backend: - specifier: ^16.0.1 - version: 16.0.1 react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) @@ -3016,6 +3022,61 @@ packages: chalk: 4.1.2 dev: true + /@dnd-kit/accessibility@3.1.0(react@18.2.0): + resolution: {integrity: sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + tslib: 2.6.2 + dev: false + + /@dnd-kit/core@6.1.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@dnd-kit/accessibility': 3.1.0(react@18.2.0) + '@dnd-kit/utilities': 3.2.2(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tslib: 2.6.2 + dev: false + + /@dnd-kit/modifiers@7.0.0(@dnd-kit/core@6.1.0)(react@18.2.0): + resolution: {integrity: sha512-BG/ETy3eBjFap7+zIti53f0PCLGDzNXyTmn6fSdrudORf+OH04MxrW4p5+mPu4mgMk9kM41iYONjc3DOUWTcfg==} + peerDependencies: + '@dnd-kit/core': ^6.1.0 + react: '>=16.8.0' + dependencies: + '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/utilities': 3.2.2(react@18.2.0) + react: 18.2.0 + tslib: 2.6.2 + dev: false + + /@dnd-kit/sortable@8.0.0(@dnd-kit/core@6.1.0)(react@18.2.0): + resolution: {integrity: sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==} + peerDependencies: + '@dnd-kit/core': ^6.1.0 + react: '>=16.8.0' + dependencies: + '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/utilities': 3.2.2(react@18.2.0) + react: 18.2.0 + tslib: 2.6.2 + dev: false + + /@dnd-kit/utilities@3.2.2(react@18.2.0): + resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + tslib: 2.6.2 + dev: false + /@emotion/babel-plugin-jsx-pragmatic@0.2.1(@babel/core@7.23.7): resolution: {integrity: sha512-xy1SlgEJygAAIvIuC2idkGKJYa6v5iwoyILkvNKgk347bV+IImXrUat5Z86EmLGyWhEoTplVT9EHqTnHZG4HFw==} peerDependencies: From 000488646dc654bca3fbd9df4512c10ca323be10 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Sat, 17 Feb 2024 12:06:01 +1100 Subject: [PATCH 12/19] ci: Use Nx Agents (#5356) --- .github/workflows/ci.yml | 7 ++++++- .github/workflows/pr.yml | 7 ++++++- .gitignore | 5 +++-- .nx/workflows/dynamic-changesets.yaml | 4 ++++ nx.json | 4 ++++ 5 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 .nx/workflows/dynamic-changesets.yaml diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 41f3e35af9..3681e39fb7 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -35,10 +35,15 @@ jobs: with: node-version-file: .nvmrc cache: pnpm + - name: Start Nx Agents + run: npx nx-cloud start-ci-run --distribute-on=".nx/workflows/dynamic-changesets.yaml" - name: Install dependencies run: pnpm install --frozen-lockfile --prefer-offline - name: Run Tests - run: pnpm run test:ci + run: pnpm run test:ci --parallel=3 + - name: Stop Nx Agents + if: ${{ always() }} + run: npx nx-cloud stop-all-agents - name: Publish run: | git config --global user.name 'Tanner Linsley' diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 70a0723ad9..569e24df61 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -32,6 +32,8 @@ jobs: with: node-version-file: .nvmrc cache: pnpm + - name: Start Nx Agents + run: npx nx-cloud start-ci-run --distribute-on=".nx/workflows/dynamic-changesets.yaml" - name: Install dependencies run: pnpm install --frozen-lockfile --prefer-offline - name: Get base and head commits for `nx affected` @@ -39,4 +41,7 @@ jobs: with: main-branch-name: 'main' - name: Run Checks - run: pnpm run test:pr + run: pnpm run test:pr --parallel=3 + - name: Stop Nx Agents + if: ${{ always() }} + run: npx nx-cloud stop-all-agents diff --git a/.gitignore b/.gitignore index 9705b85efa..1ef516313f 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,8 @@ # dependencies node_modules +package-lock.json +yarn.lock # builds types @@ -36,9 +38,8 @@ stats.html *.log .DS_Store -node_modules .cache -dist +.pnpm-store package-lock.json yarn.lock diff --git a/.nx/workflows/dynamic-changesets.yaml b/.nx/workflows/dynamic-changesets.yaml new file mode 100644 index 0000000000..29c58231b2 --- /dev/null +++ b/.nx/workflows/dynamic-changesets.yaml @@ -0,0 +1,4 @@ +distribute-on: + small-changeset: 8 linux-medium-js + medium-changeset: 10 linux-medium-js + large-changeset: 12 linux-medium-js diff --git a/nx.json b/nx.json index d1b1d77802..906acf9f5a 100644 --- a/nx.json +++ b/nx.json @@ -43,6 +43,10 @@ "inputs": ["default", "^public"], "outputs": ["{projectRoot}/build", "{projectRoot}/dist"], "cache": true + }, + "test:format": { + "cache": true, + "inputs": ["{workspaceRoot}/**/*"] } } } From 06f560cf106287ba38077f1c73a03176e649507b Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Sat, 17 Feb 2024 14:11:01 +1100 Subject: [PATCH 13/19] chore: Add knip and sherif (#5357) * Add knip and sherif * Update Nx command --- babel.config.cjs | 1 - knip.json | 12 + nx.json | 8 + package.json | 21 +- .../react-table-devtools/src/Explorer.tsx | 12 +- .../src/styledComponents.ts | 8 +- packages/react-table-devtools/src/utils.ts | 4 +- packages/react-table/package.json | 6 +- .../table-core/src/utils/filterRowsUtils.ts | 4 +- packages/vue-table/src/merge-proxy.ts | 2 +- pnpm-lock.yaml | 1010 ++++++++++++++++- scripts/getRollupConfig.js | 6 + 12 files changed, 1024 insertions(+), 70 deletions(-) create mode 100644 knip.json diff --git a/babel.config.cjs b/babel.config.cjs index 2f6aa29258..84a3ee4ebe 100644 --- a/babel.config.cjs +++ b/babel.config.cjs @@ -21,7 +21,6 @@ module.exports = { '@babel/preset-typescript', ], plugins: [ - // 'babel-plugin-transform-async-to-promises', cjs && ['@babel/transform-modules-commonjs', { loose }], // [ // '@babel/transform-runtime', diff --git a/knip.json b/knip.json new file mode 100644 index 0000000000..06c48ae872 --- /dev/null +++ b/knip.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://unpkg.com/knip@4/schema.json", + "ignoreWorkspaces": ["examples/**"], + "workspaces": { + "packages/match-sorter-utils": { + "ignoreDependencies": ["remove-accents"] + }, + "packages/react-table": { + "ignore": ["**/*.notest.*", "**/makeTestData.ts"] + } + } +} diff --git a/nx.json b/nx.json index 906acf9f5a..2c338bf2ca 100644 --- a/nx.json +++ b/nx.json @@ -44,9 +44,17 @@ "outputs": ["{projectRoot}/build", "{projectRoot}/dist"], "cache": true }, + "test:knip": { + "cache": true, + "inputs": ["{workspaceRoot}/**/*"] + }, "test:format": { "cache": true, "inputs": ["{workspaceRoot}/**/*"] + }, + "test:sherif": { + "cache": true, + "inputs": ["{workspaceRoot}/**/*"] } } } diff --git a/package.json b/package.json index 67cb829b77..bf58b8b28f 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,14 @@ "clean": "pnpm --filter \"./packages/**\" run clean", "preinstall": "node -e \"if(process.env.CI == 'true') {console.log('Skipping preinstall...'); process.exit(1)}\" || npx -y only-allow pnpm", "test": "pnpm run test:ci", - "test:pr": "nx affected --targets=test:format,test:lib,test:types,build", - "test:ci": "nx run-many --targets=test:format,test:lib,test:types,build", + "test:pr": "nx affected --targets=test:format,test:sherif,test:knip,test:lib,test:types,build", + "test:ci": "nx run-many --targets=test:format,test:sherif,test:knip,test:lib,test:types,build", "test:format": "pnpm run prettier --check", + "test:sherif": "sherif", "test:lib": "nx affected --targets=test:lib --exclude=examples/**", "test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib", "test:types": "nx affected --targets=test:types --exclude=examples/**", + "test:knip": "knip", "build": "nx affected --targets=build --exclude=examples/**", "build:all": "nx run-many --targets=build --exclude=examples/**", "watch": "pnpm run build:all && nx watch --all -- pnpm run build:all", @@ -24,7 +26,9 @@ }, "nx": { "includedScripts": [ - "test:format" + "test:format", + "test:knip", + "test:sherif" ] }, "namespace": "@tanstack", @@ -43,12 +47,11 @@ "@testing-library/jest-dom": "^6.2.0", "@testing-library/react": "^14.1.2", "@testing-library/react-hooks": "^8.0.1", - "@tsconfig/svelte": "^5.0.2", "@types/node": "^18.19.4", - "@types/react": "^18.2.45", + "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", - "babel-plugin-transform-async-to-promises": "^0.8.18", "jsdom": "^23.2.0", + "knip": "^4.6.0", "nx": "^17.2.8", "prettier": "^4.0.0-alpha.8", "prettier-plugin-svelte": "^3.1.2", @@ -59,11 +62,9 @@ "rollup-plugin-size": "^0.3.1", "rollup-plugin-svelte": "^7.1.6", "rollup-plugin-visualizer": "^5.12.0", - "solid-js": "^1.8.11", + "sherif": "^0.7.0", "svelte": "^4.2.8", "typescript": "5.3.3", - "vite": "^5.0.11", - "vitest": "^1.2.0", - "vue": "^3.4.14" + "vitest": "^1.2.0" } } diff --git a/packages/react-table-devtools/src/Explorer.tsx b/packages/react-table-devtools/src/Explorer.tsx index ff0cd8a203..8028b70b09 100644 --- a/packages/react-table-devtools/src/Explorer.tsx +++ b/packages/react-table-devtools/src/Explorer.tsx @@ -4,7 +4,7 @@ import React from 'react' import { styled } from './utils' -export const Entry = styled('div', { +const Entry = styled('div', { fontFamily: 'Menlo, monospace', fontSize: '0.7rem', lineHeight: '1.7', @@ -12,27 +12,27 @@ export const Entry = styled('div', { wordBreak: 'break-word', }) -export const Label = styled('span', { +const Label = styled('span', { cursor: 'pointer', color: 'white', }) -export const Value = styled('span', (props, theme) => ({ +const Value = styled('span', (props, theme) => ({ color: theme.danger, })) -export const SubEntries = styled('div', { +const SubEntries = styled('div', { marginLeft: '.1rem', paddingLeft: '1rem', borderLeft: '2px solid rgba(0,0,0,.15)', }) -export const Info = styled('span', { +const Info = styled('span', { color: 'grey', fontSize: '.7rem', }) -export const Expander = ({ expanded, style = {}, ...rest }) => ( +const Expander = ({ expanded, style = {}, ...rest }) => ( ({ flex: '1 1 500px', @@ -63,11 +63,11 @@ export const Button = styled('button', (props, theme) => ({ // borderRadius: '.2em', // }) -export const Code = styled('code', { +const Code = styled('code', { fontSize: '.9em', }) -export const Input = styled('input', (_props, theme) => ({ +const Input = styled('input', (_props, theme) => ({ backgroundColor: theme.inputBackgroundColor, border: 0, borderRadius: '.2em', @@ -77,7 +77,7 @@ export const Input = styled('input', (_props, theme) => ({ padding: '.3em .4em', })) -export const Select = styled( +const Select = styled( 'select', (_props, theme) => ({ display: `inline-block`, diff --git a/packages/react-table-devtools/src/utils.ts b/packages/react-table-devtools/src/utils.ts index eb75ca6640..945b3b2423 100644 --- a/packages/react-table-devtools/src/utils.ts +++ b/packages/react-table-devtools/src/utils.ts @@ -3,7 +3,7 @@ import React from 'react' import { Theme, useTheme } from './theme' import useMediaQuery from './useMediaQuery' -export const isServer = typeof window === 'undefined' +const isServer = typeof window === 'undefined' type StyledComponent = T extends 'button' ? React.DetailedHTMLProps< @@ -104,7 +104,7 @@ export function useIsMounted() { * to prevent updating a component state while React is rendering different components * or when the component is not mounted anymore. */ -export function useSafeState(initialState: T): [T, (value: T) => void] { +function useSafeState(initialState: T): [T, (value: T) => void] { const isMounted = useIsMounted() const [state, setState] = React.useState(initialState) diff --git a/packages/react-table/package.json b/packages/react-table/package.json index e00eb40fa3..c2e73db188 100644 --- a/packages/react-table/package.json +++ b/packages/react-table/package.json @@ -54,10 +54,8 @@ "@tanstack/table-core": "workspace:*" }, "devDependencies": { - "@types/react": "^18.2.45", - "@types/react-dom": "^18.2.18", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "@types/react": "^18.2.48", + "react": "^18.2.0" }, "peerDependencies": { "react": ">=16", diff --git a/packages/table-core/src/utils/filterRowsUtils.ts b/packages/table-core/src/utils/filterRowsUtils.ts index 8e0bf25e40..a27258f145 100644 --- a/packages/table-core/src/utils/filterRowsUtils.ts +++ b/packages/table-core/src/utils/filterRowsUtils.ts @@ -13,7 +13,7 @@ export function filterRows( return filterRowModelFromRoot(rows, filterRowImpl, table) } -export function filterRowModelFromLeafs( +function filterRowModelFromLeafs( rowsToFilter: Row[], filterRow: (row: Row) => Row[], table: Table @@ -77,7 +77,7 @@ export function filterRowModelFromLeafs( } } -export function filterRowModelFromRoot( +function filterRowModelFromRoot( rowsToFilter: Row[], filterRow: (row: Row) => any, table: Table diff --git a/packages/vue-table/src/merge-proxy.ts b/packages/vue-table/src/merge-proxy.ts index b12cb35106..c5605934b1 100644 --- a/packages/vue-table/src/merge-proxy.ts +++ b/packages/vue-table/src/merge-proxy.ts @@ -2,7 +2,7 @@ function trueFn() { return true } -export const $PROXY = Symbol('merge-proxy') +const $PROXY = Symbol('merge-proxy') // https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118 const propTraps: ProxyHandler<{ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 115e21048d..41641fd1a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,24 +50,21 @@ importers: '@testing-library/react-hooks': specifier: ^8.0.1 version: 8.0.1(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) - '@tsconfig/svelte': - specifier: ^5.0.2 - version: 5.0.2 '@types/node': specifier: ^18.19.4 version: 18.19.7 '@types/react': - specifier: ^18.2.45 + specifier: ^18.2.48 version: 18.2.48 '@types/react-dom': specifier: ^18.2.18 version: 18.2.18 - babel-plugin-transform-async-to-promises: - specifier: ^0.8.18 - version: 0.8.18 jsdom: specifier: ^23.2.0 version: 23.2.0 + knip: + specifier: ^4.6.0 + version: 4.6.0(@types/node@18.19.7)(typescript@5.3.3) nx: specifier: ^17.2.8 version: 17.2.8 @@ -98,24 +95,18 @@ importers: rollup-plugin-visualizer: specifier: ^5.12.0 version: 5.12.0(rollup@4.9.5) - solid-js: - specifier: ^1.8.11 - version: 1.8.11 + sherif: + specifier: ^0.7.0 + version: 0.7.0 svelte: specifier: ^4.2.8 version: 4.2.8 typescript: specifier: 5.3.3 version: 5.3.3 - vite: - specifier: ^5.0.11 - version: 5.0.11(@types/node@18.19.7) vitest: specifier: ^1.2.0 version: 1.2.0(@types/node@18.19.7)(jsdom@23.2.0) - vue: - specifier: ^3.4.14 - version: 3.4.14(typescript@5.3.3) examples/react/basic: dependencies: @@ -1608,19 +1599,16 @@ importers: '@tanstack/table-core': specifier: workspace:* version: link:../table-core + react-dom: + specifier: '>=16' + version: 18.2.0(react@18.2.0) devDependencies: '@types/react': - specifier: ^18.2.45 - version: 18.2.45 - '@types/react-dom': - specifier: ^18.2.18 - version: 18.2.18 + specifier: ^18.2.48 + version: 18.2.48 react: specifier: ^18.2.0 version: 18.2.0 - react-dom: - specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) packages/react-table-devtools: dependencies: @@ -3196,6 +3184,31 @@ packages: resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==} dev: false + /@ericcornelissen/bash-parser@0.5.2: + resolution: {integrity: sha512-4pIMTa1nEFfMXitv7oaNEWOdM+zpOZavesa5GaiWTgda6Zk32CFGxjUp/iIaN0PwgUW1yTq/fztSjbpE8SLGZQ==} + engines: {node: '>=4'} + dependencies: + array-last: 1.3.0 + babylon: 6.18.0 + compose-function: 3.0.3 + deep-freeze: 0.0.1 + filter-iterator: 0.0.1 + filter-obj: 1.1.0 + has-own-property: 0.1.0 + identity-function: 1.0.0 + is-iterable: 1.1.1 + iterable-lookahead: 1.0.0 + lodash.curry: 4.1.1 + magic-string: 0.16.0 + map-obj: 2.0.0 + object-pairs: 0.1.0 + object-values: 1.0.0 + reverse-arguments: 1.0.0 + shell-quote-word: 1.0.1 + to-pascal-case: 1.0.0 + unescape-js: 1.1.4 + dev: true + /@esbuild/aix-ppc64@0.19.10: resolution: {integrity: sha512-Q+mk96KJ+FZ30h9fsJl+67IjNJm3x2eX+GBWGmocAKgzp27cowCOOqSdscX80s0SpdFXZnIv/+1xD1EctFx96Q==} engines: {node: '>=12'} @@ -3741,11 +3754,24 @@ packages: run-parallel: 1.2.0 dev: true + /@nodelib/fs.scandir@3.0.0: + resolution: {integrity: sha512-ktI9+PxfHYtKjF3cLTUAh2N+b8MijCRPNwKJNqTVdL0gB0QxLU2rIRaZ1t71oEa3YBDE6bukH1sR0+CDnpp/Mg==} + engines: {node: '>=16.14.0'} + dependencies: + '@nodelib/fs.stat': 3.0.0 + run-parallel: 1.2.0 + dev: true + /@nodelib/fs.stat@2.0.5: resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==} engines: {node: '>= 8'} dev: true + /@nodelib/fs.stat@3.0.0: + resolution: {integrity: sha512-2tQOI38s19P9i7X/Drt0v8iMA+KMsgdhB/dyPER+e+2Y8L1Z7QvnuRdW/uLuf5YRFUYmnj4bMA6qCuZHFI1GDQ==} + engines: {node: '>=16.14.0'} + dev: true + /@nodelib/fs.walk@1.2.8: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} @@ -3754,6 +3780,67 @@ packages: fastq: 1.15.0 dev: true + /@nodelib/fs.walk@2.0.0: + resolution: {integrity: sha512-54voNDBobGdMl3BUXSu7UaDh1P85PGHWlJ5e0XhPugo1JulOyCtp2I+5ri4wplGDJ8QGwPEQW7/x3yTLU7yF1A==} + engines: {node: '>=16.14.0'} + dependencies: + '@nodelib/fs.scandir': 3.0.0 + fastq: 1.15.0 + dev: true + + /@npmcli/git@5.0.4: + resolution: {integrity: sha512-nr6/WezNzuYUppzXRaYu/W4aT5rLxdXqEFupbh6e/ovlYFQ8hpu1UUPV3Ir/YTl+74iXl2ZOMlGzudh9ZPUchQ==} + engines: {node: ^16.14.0 || >=18.0.0} + dependencies: + '@npmcli/promise-spawn': 7.0.1 + lru-cache: 10.1.0 + npm-pick-manifest: 9.0.0 + proc-log: 3.0.0 + promise-inflight: 1.0.1 + promise-retry: 2.0.1 + semver: 7.6.0 + which: 4.0.0 + transitivePeerDependencies: + - bluebird + dev: true + + /@npmcli/map-workspaces@3.0.4: + resolution: {integrity: sha512-Z0TbvXkRbacjFFLpVpV0e2mheCh+WzQpcqL+4xp49uNJOxOnIAPZyXtUxZ5Qn3QBTGKA11Exjd9a5411rBrhDg==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + dependencies: + '@npmcli/name-from-folder': 2.0.0 + glob: 10.3.10 + minimatch: 9.0.3 + read-package-json-fast: 3.0.2 + dev: true + + /@npmcli/name-from-folder@2.0.0: + resolution: {integrity: sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + dev: true + + /@npmcli/package-json@5.0.0: + resolution: {integrity: sha512-OI2zdYBLhQ7kpNPaJxiflofYIpkNLi+lnGdzqUOfRmCF3r2l1nadcjtCYMJKv/Utm/ZtlffaUuTiAktPHbc17g==} + engines: {node: ^16.14.0 || >=18.0.0} + dependencies: + '@npmcli/git': 5.0.4 + glob: 10.3.10 + hosted-git-info: 7.0.1 + json-parse-even-better-errors: 3.0.1 + normalize-package-data: 6.0.0 + proc-log: 3.0.0 + semver: 7.6.0 + transitivePeerDependencies: + - bluebird + dev: true + + /@npmcli/promise-spawn@7.0.1: + resolution: {integrity: sha512-P4KkF9jX3y+7yFUxgcUdDtLy+t4OlDGuEBLNs57AZsfSfg+uV6MLndqGpnl4831ggaEdXwR50XFoZP4VFtHolg==} + engines: {node: ^16.14.0 || >=18.0.0} + dependencies: + which: 4.0.0 + dev: true + /@nrwl/tao@17.2.8: resolution: {integrity: sha512-Qpk5YKeJ+LppPL/wtoDyNGbJs2MsTi6qyX/RdRrEc8lc4bk6Cw3Oul1qTXCI6jT0KzTz+dZtd0zYD/G7okkzvg==} hasBin: true @@ -3863,6 +3950,130 @@ packages: dev: true optional: true + /@pnpm/constants@7.1.1: + resolution: {integrity: sha512-31pZqMtjwV+Vaq7MaPrT1EoDFSYwye3dp6BiHIGRJmVThCQwySRKM7hCvqqI94epNkqFAAYoWrNynWoRYosGdw==} + engines: {node: '>=16.14'} + dev: true + + /@pnpm/core-loggers@9.0.6(@pnpm/logger@5.0.0): + resolution: {integrity: sha512-iK67SGbp+06bA/elpg51wygPFjNA7JKHtKkpLxqXXHw+AjFFBC3f2OznJsCIuDK6HdGi5UhHLYqo5QxJ2gMqJQ==} + engines: {node: '>=16.14'} + peerDependencies: + '@pnpm/logger': ^5.0.0 + dependencies: + '@pnpm/logger': 5.0.0 + '@pnpm/types': 9.4.2 + dev: true + + /@pnpm/error@5.0.2: + resolution: {integrity: sha512-0TEm+tWNYm+9uh6DSKyRbv8pv/6b4NL0PastLvMxIoqZbBZ5Zj1cYi332R9xsSUi31ZOsu2wpgn/bC7DA9hrjg==} + engines: {node: '>=16.14'} + dependencies: + '@pnpm/constants': 7.1.1 + dev: true + + /@pnpm/fetching-types@5.0.0: + resolution: {integrity: sha512-o9gdO1v8Uc5P2fBBuW6GSpfTqIivQmQlqjQJdFiQX0m+tgxlrMRneIg392jZuc6fk7kFqjLheInlslgJfwY+4Q==} + engines: {node: '>=16.14'} + dependencies: + '@zkochan/retry': 0.2.0 + node-fetch: 3.0.0-beta.9 + transitivePeerDependencies: + - domexception + dev: true + + /@pnpm/graceful-fs@3.2.0: + resolution: {integrity: sha512-vRoXJxscDpHak7YE9SqCkzfrayn+Lw+YueOeHIPEqkgokrHeYgYeONoc2kGh0ObHaRtNSsonozVfJ456kxLNvA==} + engines: {node: '>=16.14'} + dependencies: + graceful-fs: 4.2.11 + dev: true + + /@pnpm/logger@5.0.0: + resolution: {integrity: sha512-YfcB2QrX+Wx1o6LD1G2Y2fhDhOix/bAY/oAnMpHoNLsKkWIRbt1oKLkIFvxBMzLwAEPqnYWguJrYC+J6i4ywbw==} + engines: {node: '>=12.17'} + dependencies: + bole: 5.0.11 + ndjson: 2.0.0 + dev: true + + /@pnpm/npm-package-arg@1.0.0: + resolution: {integrity: sha512-oQYP08exi6mOPdAZZWcNIGS+KKPsnNwUBzSuAEGWuCcqwMAt3k/WVCqVIXzBxhO5sP2b43og69VHmPj6IroKqw==} + engines: {node: '>=14.6'} + dependencies: + hosted-git-info: 4.1.0 + semver: 7.6.0 + validate-npm-package-name: 4.0.0 + dev: true + + /@pnpm/npm-resolver@18.1.0(@pnpm/logger@5.0.0): + resolution: {integrity: sha512-fUYKX/iHiHldL0VRVvkQI35YK2jWhZEkPO6rrGke8309+LKAo12v833nBttMDpQrtHefmqhB4mhCzQq6L2Xqmg==} + engines: {node: '>=16.14'} + peerDependencies: + '@pnpm/logger': ^5.0.0 + dependencies: + '@pnpm/core-loggers': 9.0.6(@pnpm/logger@5.0.0) + '@pnpm/error': 5.0.2 + '@pnpm/fetching-types': 5.0.0 + '@pnpm/graceful-fs': 3.2.0 + '@pnpm/logger': 5.0.0 + '@pnpm/resolve-workspace-range': 5.0.1 + '@pnpm/resolver-base': 11.1.0 + '@pnpm/types': 9.4.2 + '@zkochan/retry': 0.2.0 + encode-registry: 3.0.1 + load-json-file: 6.2.0 + lru-cache: 10.1.0 + normalize-path: 3.0.0 + p-limit: 3.1.0 + p-memoize: 4.0.1 + parse-npm-tarball-url: 3.0.0 + path-temp: 2.1.0 + ramda: /@pnpm/ramda@0.28.1 + rename-overwrite: 5.0.0 + semver: 7.6.0 + ssri: 10.0.5 + version-selector-type: 3.0.0 + transitivePeerDependencies: + - domexception + dev: true + + /@pnpm/ramda@0.28.1: + resolution: {integrity: sha512-zcAG+lvU0fMziNeGXpPyCyCJYp5ZVrPElEE4t14jAmViaihohocZ+dDkcRIyAomox8pQsuZnv1EyHR+pOhmUWw==} + dev: true + + /@pnpm/resolve-workspace-range@5.0.1: + resolution: {integrity: sha512-yQ0pMthlw8rTgS/C9hrjne+NEnnSNevCjtdodd7i15I59jMBYciHifZ/vjg0NY+Jl+USTc3dBE+0h/4tdYjMKg==} + engines: {node: '>=16.14'} + dependencies: + semver: 7.6.0 + dev: true + + /@pnpm/resolver-base@11.1.0: + resolution: {integrity: sha512-y2qKaj18pwe1VWc3YXEitdYFo+WqOOt60aqTUuOVkJAirUzz0DzuYh3Ifct4znYWPdgUXHaN5DMphNF5iL85rA==} + engines: {node: '>=16.14'} + dependencies: + '@pnpm/types': 9.4.2 + dev: true + + /@pnpm/types@9.4.2: + resolution: {integrity: sha512-g1hcF8Nv4gd76POilz9gD4LITAPXOe5nX4ijgr8ixCbLQZfcpYiMfJ+C1RlMNRUDo8vhlNB4O3bUlxmT6EAQXA==} + engines: {node: '>=16.14'} + dev: true + + /@pnpm/workspace.pkgs-graph@2.0.14(@pnpm/logger@5.0.0): + resolution: {integrity: sha512-SBXXyWDkPEoaLTjLRyQzRHoBYH+P0NLcIjX1yPUxuJiMTvGOMzjpLWTuxYNVe/P0V0VQMrjpJFaJPjlViNLhzg==} + engines: {node: '>=16.14'} + dependencies: + '@pnpm/npm-package-arg': 1.0.0 + '@pnpm/npm-resolver': 18.1.0(@pnpm/logger@5.0.0) + '@pnpm/resolve-workspace-range': 5.0.1 + ramda: /@pnpm/ramda@0.28.1 + transitivePeerDependencies: + - '@pnpm/logger' + - domexception + dev: true + /@popperjs/core@2.11.7: resolution: {integrity: sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==} @@ -4318,6 +4529,16 @@ packages: resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} dev: true + /@snyk/github-codeowners@1.1.0: + resolution: {integrity: sha512-lGFf08pbkEac0NYgVf4hdANpAgApRjNByLXB+WBip3qj1iendOIyAwP2GKkKbQMNVy2r1xxDf0ssfWscoiC+Vw==} + engines: {node: '>=8.10'} + hasBin: true + dependencies: + commander: 4.1.1 + ignore: 5.2.4 + p-map: 4.0.0 + dev: true + /@solid-primitives/scheduled@1.4.1(solid-js@1.8.11): resolution: {integrity: sha512-OLcNXwYpX7HUOEqNPcmR31dkyI1E2imkMDBRlqsGT0ZhJV1L2g0TEREpo4nm/kUhh8LVQzkfnxS+GONx9kh90A==} peerDependencies: @@ -4576,13 +4797,13 @@ packages: /@types/parse-json@4.0.0: resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==} + /@types/picomatch@2.3.3: + resolution: {integrity: sha512-Yll76ZHikRFCyz/pffKGjrCwe/le2CDwOP5F210KQo27kpRE46U2rDnzikNlVn6/ezH3Mhn46bJMTfeVTtcYMg==} + dev: true + /@types/prop-types@15.7.11: resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==} - /@types/prop-types@15.7.5: - resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} - dev: true - /@types/pug@2.0.6: resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==} dev: true @@ -4605,14 +4826,6 @@ packages: '@types/react': 18.2.48 dev: false - /@types/react@18.2.45: - resolution: {integrity: sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==} - dependencies: - '@types/prop-types': 15.7.5 - '@types/scheduler': 0.16.3 - csstype: 3.1.1 - dev: true - /@types/react@18.2.48: resolution: {integrity: sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==} dependencies: @@ -4961,6 +5174,18 @@ packages: argparse: 2.0.1 dev: true + /@zkochan/retry@0.2.0: + resolution: {integrity: sha512-WhB+2B/ZPlW2Xy/kMJBrMbqecWXcbDDgn0K0wKBAgO2OlBTz1iLJrRWduo+DGGn0Akvz1Lu4Xvls7dJojximWw==} + engines: {node: '>=10'} + dev: true + + /@zkochan/rimraf@2.1.3: + resolution: {integrity: sha512-mCfR3gylCzPC+iqdxEA6z5SxJeOgzgbwmyxanKriIne5qZLswDe/M43aD3p5MNzwzXRhbZg/OX+MpES6Zk1a6A==} + engines: {node: '>=12.10'} + dependencies: + rimraf: 3.0.2 + dev: true + /JSONStream@1.3.5: resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==} hasBin: true @@ -4995,6 +5220,14 @@ packages: - supports-color dev: true + /aggregate-error@3.1.0: + resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==} + engines: {node: '>=8'} + dependencies: + clean-stack: 2.2.0 + indent-string: 4.0.0 + dev: true + /ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} dependencies: @@ -5088,6 +5321,10 @@ packages: dequal: 2.0.3 dev: true + /arity-n@1.0.4: + resolution: {integrity: sha512-fExL2kFDC1Q2DUOx3whE/9KoN66IzkY4b4zUHUBFM1ojEYjZZYDcUW3bek/ufGionX9giIKDC5redH2IlGqcQQ==} + dev: true + /array-each@1.0.1: resolution: {integrity: sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==} engines: {node: '>=0.10.0'} @@ -5097,6 +5334,13 @@ packages: resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==} dev: true + /array-last@1.3.0: + resolution: {integrity: sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==} + engines: {node: '>=0.10.0'} + dependencies: + is-number: 4.0.0 + dev: true + /array-slice@1.1.0: resolution: {integrity: sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==} engines: {node: '>=0.10.0'} @@ -5199,10 +5443,6 @@ packages: - supports-color dev: true - /babel-plugin-transform-async-to-promises@0.8.18: - resolution: {integrity: sha512-WpOrF76nUHijnNn10eBGOHZmXQC8JYRME9rOLxStOga7Av2VO53ehVFvVNImMksVtQuL2/7ZNxEgxnx7oo/3Hw==} - dev: true - /babel-preset-solid@1.8.8(@babel/core@7.23.7): resolution: {integrity: sha512-m+sFxzriUgMiyUPz/oWxU+N6PwY2bVsZVlc4Jxx+5XhDt5lGE/meg+ZL/kLgSAZ75YuU9AJZr444Un1bO0vhJQ==} peerDependencies: @@ -5212,6 +5452,11 @@ packages: babel-plugin-jsx-dom-expressions: 0.37.11(@babel/core@7.23.7) dev: true + /babylon@6.18.0: + resolution: {integrity: sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==} + hasBin: true + dev: true + /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -5243,6 +5488,13 @@ packages: readable-stream: 3.6.2 dev: true + /bole@5.0.11: + resolution: {integrity: sha512-KB0Ye0iMAW5BnNbnLfMSQcnI186hKUzE2fpkZWqcxsoTR7eqzlTidSOMYPHJOn/yR7VGH7uSZp37qH9q2Et0zQ==} + dependencies: + fast-safe-stringify: 2.1.1 + individual: 3.0.0 + dev: true + /bootstrap@5.3.2(@popperjs/core@2.11.8): resolution: {integrity: sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==} peerDependencies: @@ -5314,6 +5566,12 @@ packages: engines: {node: '>=6'} dev: true + /builtins@5.0.1: + resolution: {integrity: sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==} + dependencies: + semver: 7.6.0 + dev: true + /cac@6.7.14: resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} engines: {node: '>=8'} @@ -5410,6 +5668,11 @@ packages: resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==} dev: false + /clean-stack@2.2.0: + resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} + engines: {node: '>=6'} + dev: true + /cli-cursor@3.1.0: resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==} engines: {node: '>=8'} @@ -5431,6 +5694,13 @@ packages: wrap-ansi: 7.0.0 dev: true + /clone@1.0.4: + resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} + engines: {node: '>=0.8'} + requiresBuild: true + dev: true + optional: true + /clsx@2.1.0: resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} engines: {node: '>=6'} @@ -5486,6 +5756,11 @@ packages: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} dev: true + /commander@4.1.1: + resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} + engines: {node: '>= 6'} + dev: true + /commander@9.5.0: resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==} engines: {node: ^12.20.0 || >=14} @@ -5504,6 +5779,12 @@ packages: dot-prop: 5.3.0 dev: true + /compose-function@3.0.3: + resolution: {integrity: sha512-xzhzTJ5eC+gmIzvZq+C3kCJHsp9os6tJkrigDRZclyGtOKINbZtE8n1Tzmeh32jW+BUDPbvZpibwvJHBLGMVwg==} + dependencies: + arity-n: 1.0.4 + dev: true + /computeds@0.0.1: resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==} dev: true @@ -5573,6 +5854,11 @@ packages: which: 2.0.2 dev: true + /crypto-random-string@2.0.0: + resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==} + engines: {node: '>=8'} + dev: true + /css-tree@2.3.1: resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} @@ -5610,6 +5896,11 @@ packages: is-git-repository: 1.1.1 dev: true + /data-uri-to-buffer@3.0.1: + resolution: {integrity: sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==} + engines: {node: '>= 6'} + dev: true + /data-urls@5.0.0: resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==} engines: {node: '>=18'} @@ -5667,11 +5958,23 @@ packages: which-typed-array: 1.1.9 dev: true + /deep-freeze@0.0.1: + resolution: {integrity: sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==} + dev: true + /deepmerge@4.3.1: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} dev: true + /defaults@1.0.4: + resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==} + requiresBuild: true + dependencies: + clone: 1.0.4 + dev: true + optional: true + /define-lazy-prop@2.0.0: resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==} engines: {node: '>=8'} @@ -5776,6 +6079,14 @@ packages: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} dev: true + /easy-table@1.2.0: + resolution: {integrity: sha512-OFzVOv03YpvtcWGe5AayU5G2hgybsg3iqA6drU8UaoZyB9jLGMTrz9+asnLp/E+6qPh88yEI1gvyZFZ41dmgww==} + dependencies: + ansi-regex: 5.0.1 + optionalDependencies: + wcwidth: 1.0.1 + dev: true + /electron-to-chromium@1.4.616: resolution: {integrity: sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==} dev: true @@ -5788,6 +6099,13 @@ packages: resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} dev: true + /encode-registry@3.0.1: + resolution: {integrity: sha512-6qOwkl1g0fv0DN3Y3ggr2EaZXN71aoAqPp3p/pVaWSBSIo+YjLOWN61Fva43oVyQNPf7kgm8lkudzlzojwE2jw==} + engines: {node: '>=10'} + dependencies: + mem: 8.1.1 + dev: true + /end-of-stream@1.4.4: resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==} dependencies: @@ -5810,6 +6128,10 @@ packages: resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} + /err-code@2.0.3: + resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==} + dev: true + /error-ex@1.3.2: resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} dependencies: @@ -5961,6 +6283,17 @@ packages: micromatch: 4.0.5 dev: true + /fast-glob@3.3.2: + resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} + engines: {node: '>=8.6.0'} + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.5 + dev: true + /fast-ignore@1.1.1: resolution: {integrity: sha512-Gnvido88waUVtlDv/6VBeXv0TAlQK5lheknMwzHx9948B7uOFjyyLXsYBXixDScEXJB5fMjy4G1OOTH59VKvUA==} dependencies: @@ -5971,12 +6304,26 @@ packages: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} dev: true + /fast-safe-stringify@2.1.1: + resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==} + dev: true + /fastq@1.15.0: resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==} dependencies: reusify: 1.0.4 dev: true + /fetch-blob@2.1.2: + resolution: {integrity: sha512-YKqtUDwqLyfyMnmbw8XD6Q8j9i/HggKtPEI+pZ1+8bvheBu78biSmNaXWusx1TauGqtUUGx/cBb1mKdq2rLYow==} + engines: {node: ^10.17.0 || >=12.3.0} + peerDependencies: + domexception: '*' + peerDependenciesMeta: + domexception: + optional: true + dev: true + /figures@3.2.0: resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==} engines: {node: '>=8'} @@ -5991,6 +6338,15 @@ packages: to-regex-range: 5.0.1 dev: true + /filter-iterator@0.0.1: + resolution: {integrity: sha512-v4lhL7Qa8XpbW3LN46CEnmhGk3eHZwxfNl5at20aEkreesht4YKb/Ba3BUIbnPhAC/r3dmu7ABaGk6MAvh2alA==} + dev: true + + /filter-obj@1.1.0: + resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==} + engines: {node: '>=0.10.0'} + dev: true + /find-root@1.1.0: resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==} @@ -6078,6 +6434,15 @@ packages: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} dev: true + /fs-extra@10.1.0: + resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==} + engines: {node: '>=12'} + dependencies: + graceful-fs: 4.2.11 + jsonfile: 6.1.0 + universalify: 2.0.0 + dev: true + /fs-extra@11.1.1: resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==} engines: {node: '>=14.14'} @@ -6266,6 +6631,10 @@ packages: engines: {node: '>=8'} dev: true + /has-own-property@0.1.0: + resolution: {integrity: sha512-14qdBKoonU99XDhWcFKZTShK+QV47qU97u8zzoVo9cL5TZ3BmBHXogItSt9qJjR0KUMFRhcCW8uGIGl8nkl7Aw==} + dev: true + /has-property-descriptors@1.0.0: resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==} dependencies: @@ -6308,6 +6677,20 @@ packages: parse-passwd: 1.0.0 dev: true + /hosted-git-info@4.1.0: + resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==} + engines: {node: '>=10'} + dependencies: + lru-cache: 6.0.0 + dev: true + + /hosted-git-info@7.0.1: + resolution: {integrity: sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==} + engines: {node: ^16.14.0 || >=18.0.0} + dependencies: + lru-cache: 10.1.0 + dev: true + /html-encoding-sniffer@4.0.0: resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} engines: {node: '>=18'} @@ -6356,6 +6739,10 @@ packages: safer-buffer: 2.1.2 dev: true + /identity-function@1.0.0: + resolution: {integrity: sha512-kNrgUK0qI+9qLTBidsH85HjDLpZfrrS0ElquKKe/fJFdB3D7VeKdXXEvOPDUHSHOzdZKCAAaQIWWyp0l2yq6pw==} + dev: true + /ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} dev: true @@ -6386,6 +6773,10 @@ packages: engines: {node: '>=8'} dev: true + /individual@3.0.0: + resolution: {integrity: sha512-rUY5vtT748NMRbEMrTNiFfy29BgGZwGXUi2NFUVMWQrogSLzlJvQV9eeMWi+g1aVaQ53tpyLAQtd5x/JH0Nh1g==} + dev: true + /inflight@1.0.6: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} dependencies: @@ -6529,6 +6920,11 @@ packages: is-extglob: 2.1.1 dev: true + /is-iterable@1.1.1: + resolution: {integrity: sha512-EdOZCr0NsGE00Pot+x1ZFx9MJK3C6wy91geZpXwvwexDLJvA4nzYyZf7r+EIwSeVsOLDdBz7ATg9NqKTzuNYuQ==} + engines: {node: '>= 4'} + dev: true + /is-map@2.0.2: resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==} dev: true @@ -6544,6 +6940,11 @@ packages: has-tostringtag: 1.0.0 dev: true + /is-number@4.0.0: + resolution: {integrity: sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==} + engines: {node: '>=0.10.0'} + dev: true + /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} @@ -6689,11 +7090,21 @@ packages: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} dev: true + /isexe@3.1.1: + resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==} + engines: {node: '>=16'} + dev: true + /isobject@3.0.1: resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==} engines: {node: '>=0.10.0'} dev: true + /iterable-lookahead@1.0.0: + resolution: {integrity: sha512-hJnEP2Xk4+44DDwJqUQGdXal5VbyeWLaPyDl2AQc242Zr7iqz4DgpQOrEzglWVMGHMDCkguLHEKxd1+rOsmgSQ==} + engines: {node: '>=4'} + dev: true + /jackspeak@2.3.6: resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==} engines: {node: '>=14'} @@ -6718,6 +7129,11 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dev: true + /jiti@1.21.0: + resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==} + hasBin: true + dev: true + /jju@1.4.0: resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} dev: true @@ -6794,6 +7210,11 @@ packages: /json-parse-even-better-errors@2.3.1: resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} + /json-parse-even-better-errors@3.0.1: + resolution: {integrity: sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + dev: true + /json-schema-traverse@0.4.1: resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} dev: true @@ -6802,6 +7223,10 @@ packages: resolution: {integrity: sha512-r27DgPdI80AXd6Hm0zJ7nPCYTBFUersR7sn7xcYyafvcgYOvwmCXB+DKWazAe0YaCNHbxH5Qzt7AIhUzPD1ETg==} dev: true + /json-stringify-safe@5.0.1: + resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==} + dev: true + /json5@2.2.3: resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} engines: {node: '>=6'} @@ -6845,6 +7270,44 @@ packages: engines: {node: '>=6'} dev: true + /knip@4.6.0(@types/node@18.19.7)(typescript@5.3.3): + resolution: {integrity: sha512-6slzggzmyAuvtr97nH56ob1RNlkrG2dGF7yn8PJ/LIF8bPsoM93TRNLWTbmuOg4/E1CImilSX4qy9fok0AKJyA==} + engines: {node: '>=18.6.0'} + hasBin: true + peerDependencies: + '@types/node': '>=18' + typescript: '>=5.0.4' + dependencies: + '@ericcornelissen/bash-parser': 0.5.2 + '@nodelib/fs.walk': 2.0.0 + '@npmcli/map-workspaces': 3.0.4 + '@npmcli/package-json': 5.0.0 + '@pnpm/logger': 5.0.0 + '@pnpm/workspace.pkgs-graph': 2.0.14(@pnpm/logger@5.0.0) + '@snyk/github-codeowners': 1.1.0 + '@types/node': 18.19.7 + '@types/picomatch': 2.3.3 + easy-table: 1.2.0 + fast-glob: 3.3.2 + jiti: 1.21.0 + js-yaml: 4.1.0 + micromatch: 4.0.5 + minimist: 1.2.8 + picocolors: 1.0.0 + picomatch: 4.0.1 + pretty-ms: 9.0.0 + semver: 7.6.0 + smol-toml: 1.1.4 + strip-json-comments: 5.0.1 + summary: 2.1.0 + typescript: 5.3.3 + zod: 3.22.4 + zod-validation-error: 3.0.0(zod@3.22.4) + transitivePeerDependencies: + - bluebird + - domexception + dev: true + /kolorist@1.8.0: resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} dev: true @@ -6871,6 +7334,16 @@ packages: engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} dev: true + /load-json-file@6.2.0: + resolution: {integrity: sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==} + engines: {node: '>=8'} + dependencies: + graceful-fs: 4.2.11 + parse-json: 5.2.0 + strip-bom: 4.0.0 + type-fest: 0.6.0 + dev: true + /local-pkg@0.5.0: resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==} engines: {node: '>=14'} @@ -6883,6 +7356,10 @@ packages: resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==} dev: true + /lodash.curry@4.1.1: + resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==} + dev: true + /lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} dev: true @@ -6946,6 +7423,12 @@ packages: hasBin: true dev: true + /magic-string@0.16.0: + resolution: {integrity: sha512-c4BEos3y6G2qO0B9X7K0FVLOPT9uGrjYwYRLFmDqyl5YMboUviyecnXWp94fJTSMwPw2/sf+CEYt5AGpmklkkQ==} + dependencies: + vlq: 0.2.3 + dev: true + /magic-string@0.25.9: resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} dependencies: @@ -6965,11 +7448,23 @@ packages: kind-of: 6.0.3 dev: true + /map-age-cleaner@0.1.3: + resolution: {integrity: sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==} + engines: {node: '>=6'} + dependencies: + p-defer: 1.0.0 + dev: true + /map-cache@0.2.2: resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==} engines: {node: '>=0.10.0'} dev: true + /map-obj@2.0.0: + resolution: {integrity: sha512-TzQSV2DiMYgoF5RycneKVUzIa9bQsj/B3tTgsE3dOGqlzHnGIDaC7XBE7grnA+8kZPnfqSGFe95VHc2oc0VFUQ==} + engines: {node: '>=4'} + dev: true + /match-sorter@6.3.1: resolution: {integrity: sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==} dependencies: @@ -6981,6 +7476,22 @@ packages: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} dev: true + /mem@6.1.1: + resolution: {integrity: sha512-Ci6bIfq/UgcxPTYa8dQQ5FY3BzKkT894bwXWXxC/zqs0XgMO2cT20CGkOqda7gZNkmK5VP4x89IGZ6K7hfbn3Q==} + engines: {node: '>=8'} + dependencies: + map-age-cleaner: 0.1.3 + mimic-fn: 3.1.0 + dev: true + + /mem@8.1.1: + resolution: {integrity: sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==} + engines: {node: '>=10'} + dependencies: + map-age-cleaner: 0.1.3 + mimic-fn: 3.1.0 + dev: true + /meow@12.1.1: resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==} engines: {node: '>=16.10'} @@ -7031,6 +7542,11 @@ packages: engines: {node: '>=6'} dev: true + /mimic-fn@3.1.0: + resolution: {integrity: sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==} + engines: {node: '>=8'} + dev: true + /mimic-fn@4.0.0: resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==} engines: {node: '>=12'} @@ -7121,6 +7637,28 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + /ndjson@2.0.0: + resolution: {integrity: sha512-nGl7LRGrzugTtaFcJMhLbpzJM6XdivmbkdlaGcrk/LXg2KL/YBC6z1g70xh0/al+oFuVFP8N8kiWRucmeEH/qQ==} + engines: {node: '>=10'} + hasBin: true + dependencies: + json-stringify-safe: 5.0.1 + minimist: 1.2.8 + readable-stream: 3.6.2 + split2: 3.2.2 + through2: 4.0.2 + dev: true + + /node-fetch@3.0.0-beta.9: + resolution: {integrity: sha512-RdbZCEynH2tH46+tj0ua9caUHVWrd/RHnRfvly2EVdqGmI3ndS1Vn/xjm5KuGejDt2RNDQsVRLPNd2QPwcewVg==} + engines: {node: ^10.17 || >=12.3} + dependencies: + data-uri-to-buffer: 3.0.1 + fetch-blob: 2.1.2 + transitivePeerDependencies: + - domexception + dev: true + /node-machine-id@1.1.12: resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==} dev: true @@ -7129,11 +7667,53 @@ packages: resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} dev: true + /normalize-package-data@6.0.0: + resolution: {integrity: sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==} + engines: {node: ^16.14.0 || >=18.0.0} + dependencies: + hosted-git-info: 7.0.1 + is-core-module: 2.11.0 + semver: 7.6.0 + validate-npm-package-license: 3.0.4 + dev: true + /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} dev: true + /npm-install-checks@6.3.0: + resolution: {integrity: sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + dependencies: + semver: 7.6.0 + dev: true + + /npm-normalize-package-bin@3.0.1: + resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + dev: true + + /npm-package-arg@11.0.1: + resolution: {integrity: sha512-M7s1BD4NxdAvBKUPqqRW957Xwcl/4Zvo8Aj+ANrzvIPzGJZElrH7Z//rSaec2ORcND6FHHLnZeY8qgTpXDMFQQ==} + engines: {node: ^16.14.0 || >=18.0.0} + dependencies: + hosted-git-info: 7.0.1 + proc-log: 3.0.0 + semver: 7.6.0 + validate-npm-package-name: 5.0.0 + dev: true + + /npm-pick-manifest@9.0.0: + resolution: {integrity: sha512-VfvRSs/b6n9ol4Qb+bDwNGUXutpy76x6MARw/XssevE0TnctIKcmklJZM5Z7nqs5z5aW+0S63pgCNbpkUNNXBg==} + engines: {node: ^16.14.0 || >=18.0.0} + dependencies: + npm-install-checks: 6.3.0 + npm-normalize-package-bin: 3.0.1 + npm-package-arg: 11.0.1 + semver: 7.6.0 + dev: true + /npm-run-path@2.0.2: resolution: {integrity: sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==} engines: {node: '>=4'} @@ -7239,6 +7819,15 @@ packages: engines: {node: '>= 0.4'} dev: true + /object-pairs@0.1.0: + resolution: {integrity: sha512-3ECr6K831I4xX/Mduxr9UC+HPOz/d6WKKYj9p4cmC8Lg8p7g8gitzsxNX5IWlSIgFWN/a4JgrJaoAMKn20oKwA==} + dev: true + + /object-values@1.0.0: + resolution: {integrity: sha512-+8hwcz/JnQ9EpLIXzN0Rs7DLsBpJNT/xYehtB/jU93tHYr5BFEO8E+JGQNOSqE7opVzz5cGksKFHt7uUJVLSjQ==} + engines: {node: '>=0.10.0'} + dev: true + /object.assign@4.1.4: resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==} engines: {node: '>= 0.4'} @@ -7306,11 +7895,23 @@ packages: is-wsl: 2.2.0 dev: true + /p-defer@1.0.0: + resolution: {integrity: sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==} + engines: {node: '>=4'} + dev: true + /p-finally@1.0.0: resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==} engines: {node: '>=4'} dev: true + /p-limit@3.1.0: + resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==} + engines: {node: '>=10'} + dependencies: + yocto-queue: 0.1.0 + dev: true + /p-limit@5.0.0: resolution: {integrity: sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==} engines: {node: '>=18'} @@ -7318,6 +7919,21 @@ packages: yocto-queue: 1.0.0 dev: true + /p-map@4.0.0: + resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==} + engines: {node: '>=10'} + dependencies: + aggregate-error: 3.1.0 + dev: true + + /p-memoize@4.0.1: + resolution: {integrity: sha512-km0sP12uE0dOZ5qP+s7kGVf07QngxyG0gS8sYFvFWhqlgzOsSy+m71aUejf/0akxj5W7gE//2G74qTv6b4iMog==} + engines: {node: '>=10'} + dependencies: + mem: 6.1.1 + mimic-fn: 3.1.0 + dev: true + /parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -7342,6 +7958,18 @@ packages: json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 + /parse-ms@4.0.0: + resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==} + engines: {node: '>=18'} + dev: true + + /parse-npm-tarball-url@3.0.0: + resolution: {integrity: sha512-InpdgIdNe5xWMEUcrVQUniQKwnggBtJ7+SCwh7zQAZwbbIYZV9XdgJyhtmDSSvykFyQXoe4BINnzKTfCwWLs5g==} + engines: {node: '>=8.15'} + dependencies: + semver: 6.3.1 + dev: true + /parse-passwd@1.0.0: resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==} engines: {node: '>=0.10.0'} @@ -7399,6 +8027,13 @@ packages: minipass: 7.0.4 dev: true + /path-temp@2.1.0: + resolution: {integrity: sha512-cMMJTAZlion/RWRRC48UbrDymEIt+/YSD/l8NqjneyDw2rDOBQcP5yRkMB4CYGn47KMhZvbblBP7Z79OsMw72w==} + engines: {node: '>=8.15'} + dependencies: + unique-string: 2.0.0 + dev: true + /path-type@4.0.0: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} engines: {node: '>=8'} @@ -7427,6 +8062,11 @@ packages: engines: {node: '>=8.6'} dev: true + /picomatch@4.0.1: + resolution: {integrity: sha512-xUXwsxNjwTQ8K3GnT4pCJm+xq3RUPQbmkYJTP5aFIfNIvbcc/4MUxgBaaRSZJ6yGJZiGSyYlM6MzwTsRk8SYCg==} + engines: {node: '>=12'} + dev: true + /pioppo@1.1.0: resolution: {integrity: sha512-8gZ58S4GBMkCGAEwBi98YgNFfXwcNql2sCXstolxnGUrsBnHA/BrKjsN4EbfCsKjQ4uERrEDfeh444ymGwNMdA==} dependencies: @@ -7518,14 +8158,43 @@ packages: react-is: 18.2.0 dev: true + /pretty-ms@9.0.0: + resolution: {integrity: sha512-E9e9HJ9R9NasGOgPaPE8VMeiPKAyWR5jcFpNnwIejslIhWqdqOrb2wShBsncMPUb+BcCd2OPYfh7p2W6oemTng==} + engines: {node: '>=18'} + dependencies: + parse-ms: 4.0.0 + dev: true + + /proc-log@3.0.0: + resolution: {integrity: sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + dev: true + /process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} dev: true + /promise-inflight@1.0.1: + resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==} + peerDependencies: + bluebird: '*' + peerDependenciesMeta: + bluebird: + optional: true + dev: true + /promise-make-naked@2.1.1: resolution: {integrity: sha512-BLvgZSNRkQNM5RGL4Cz8wK76WSb+t3VeMJL+/kxRBHI5+nliqZezranGGtiu/ePeFo5+CaLRvvGMzXrBuu2tAA==} dev: true + /promise-retry@2.0.1: + resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==} + engines: {node: '>=10'} + dependencies: + err-code: 2.0.3 + retry: 0.12.0 + dev: true + /prop-types-extra@1.1.1(react@18.2.0): resolution: {integrity: sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==} peerDependencies: @@ -7711,6 +8380,14 @@ packages: dependencies: loose-envify: 1.4.0 + /read-package-json-fast@3.0.2: + resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + dependencies: + json-parse-even-better-errors: 3.0.1 + npm-normalize-package-bin: 3.0.1 + dev: true + /readable-stream@2.3.8: resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==} dependencies: @@ -7816,6 +8493,14 @@ packages: resolution: {integrity: sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==} dev: false + /rename-overwrite@5.0.0: + resolution: {integrity: sha512-vSxE5Ww7Jnyotvaxi3Dj0vOMoojH8KMkBfs9xYeW/qNfJiLTcC1fmwTjrbGUq3mQSOCxkG0DbdcvwTUrpvBN4w==} + engines: {node: '>=12.10'} + dependencies: + '@zkochan/rimraf': 2.1.3 + fs-extra: 10.1.0 + dev: true + /require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -7870,11 +8555,20 @@ packages: signal-exit: 3.0.7 dev: true + /retry@0.12.0: + resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==} + engines: {node: '>= 4'} + dev: true + /reusify@1.0.4: resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} engines: {iojs: '>=1.0.0', node: '>=0.10.0'} dev: true + /reverse-arguments@1.0.0: + resolution: {integrity: sha512-/x8uIPdTafBqakK0TmPNJzgkLP+3H+yxpUJhCQHsLBg1rYEVNR2D8BRYNWQhVBjyOd7oo1dZRVzIkwMY2oqfYQ==} + dev: true + /rimraf@2.7.1: resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==} hasBin: true @@ -8065,6 +8759,14 @@ packages: lru-cache: 6.0.0 dev: true + /semver@7.6.0: + resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==} + engines: {node: '>=10'} + hasBin: true + dependencies: + lru-cache: 6.0.0 + dev: true + /serialize-javascript@6.0.1: resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==} dependencies: @@ -8107,6 +8809,70 @@ packages: engines: {node: '>=8'} dev: true + /shell-quote-word@1.0.1: + resolution: {integrity: sha512-lT297f1WLAdq0A4O+AknIFRP6kkiI3s8C913eJ0XqBxJbZPGWUNkRQk2u8zk4bEAjUJ5i+fSLwB6z1HzeT+DEg==} + dev: true + + /sherif-darwin-arm64@0.7.0: + resolution: {integrity: sha512-rzWV13FwPA3h7UcO2B1o3s5lBhB4h7p1wXPB7Z0NMR/xweiTpT+hn3kls3YLdAeIL460Gc46ieJCnPFkI/rC0A==} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /sherif-darwin-x64@0.7.0: + resolution: {integrity: sha512-6y3cp/ZdhrbHS9e1J70POZyPJdJ1eDYc43Xck9FcRL7GTsH5JbinIqyihdNVu1ctG7ewMA2Ii1nzuQe/rt9Gig==} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /sherif-linux-arm64@0.7.0: + resolution: {integrity: sha512-DRfXTJuQ3CkF41+vDtCsptKjcvZg+PM9C+btJbZnAhbLSP8kSDWNmOIyH5/LQOBpntbEe6obqPFsBTjpkATkQw==} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /sherif-linux-x64@0.7.0: + resolution: {integrity: sha512-4KM7P/V1jy8WKuGax8hOaRNWLTkwY10+MzVeof4UbTfcZxKibAHpSKtNmmzYFHKlFxOLXRGqDgXYmj5iuXB4bQ==} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /sherif-windows-arm64@0.7.0: + resolution: {integrity: sha512-WZ62t+YQ39XO6TuMTSWZJwiJTtKaoverhAk0F1MwlCkTZu2xZvlMMWKIN9wtMJvvrNYqTsjrv2xEH1EQNUDfhg==} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /sherif-windows-x64@0.7.0: + resolution: {integrity: sha512-x5464tDL2VhuLgddbVL33ekMYoTxTDkIsI018o0VaD2V675Bw6RiFrmpzd/HqjXdVRCOh0LCBfH43G3C0NN0Uw==} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /sherif@0.7.0: + resolution: {integrity: sha512-2ofYRtx6L4O1EFzUIxD4aSs4tqbE6/oes5/UTjjADHhLIBoq0SbxstPbpxLfz18EKdSDCDr5ZBQBinfm8k8bSQ==} + hasBin: true + optionalDependencies: + sherif-darwin-arm64: 0.7.0 + sherif-darwin-x64: 0.7.0 + sherif-linux-arm64: 0.7.0 + sherif-linux-x64: 0.7.0 + sherif-windows-arm64: 0.7.0 + sherif-windows-x64: 0.7.0 + dev: true + /side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: @@ -8132,6 +8898,11 @@ packages: resolution: {integrity: sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ==} dev: true + /smol-toml@1.1.4: + resolution: {integrity: sha512-Y0OT8HezWsTNeEOSVxDnKOW/AyNXHQ4BwJNbAXlLTF5wWsBvrcHhIkE5Rf8kQMLmgf7nDX3PVOlgC6/Aiggu3Q==} + engines: {node: '>= 18', pnpm: '>= 8'} + dev: true + /solid-bootstrap-core@2.0.0(solid-js@1.8.11): resolution: {integrity: sha512-tw1me1iEvI+UzYRL2Gs53MP51WVwx785CU+6KQVGhaLESw3OoayeFLhe1CvUYb7kuskjtNGyAorZMdMwBJQIBA==} peerDependencies: @@ -8229,6 +9000,28 @@ packages: resolution: {integrity: sha512-gRjMgK5uFjbCvdibeGJuy3I5OYz6VLoVdsOJdA6wV0WlfQVLFueoqMxwwYD9RODdgb6oUIvlRlsyFSiQkMKu0g==} dev: true + /spdx-correct@3.2.0: + resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==} + dependencies: + spdx-expression-parse: 3.0.1 + spdx-license-ids: 3.0.17 + dev: true + + /spdx-exceptions@2.5.0: + resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==} + dev: true + + /spdx-expression-parse@3.0.1: + resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==} + dependencies: + spdx-exceptions: 2.5.0 + spdx-license-ids: 3.0.17 + dev: true + + /spdx-license-ids@3.0.17: + resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==} + dev: true + /specialist@1.4.0: resolution: {integrity: sha512-RO76zlzjdw4acNYH2oiDqmSc3jQTymiJapNI6w47XB1iOKOaWIYA+eZ07b8pCPCsHZPwNdxHTJihS0LHFelFOA==} dependencies: @@ -8244,6 +9037,12 @@ packages: through2: 2.0.5 dev: true + /split2@3.2.2: + resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==} + dependencies: + readable-stream: 3.6.2 + dev: true + /split2@4.2.0: resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==} engines: {node: '>= 10.x'} @@ -8253,6 +9052,13 @@ packages: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} dev: true + /ssri@10.0.5: + resolution: {integrity: sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + dependencies: + minipass: 7.0.4 + dev: true + /stackback@0.0.2: resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} dev: true @@ -8308,6 +9114,10 @@ packages: strip-ansi: 7.0.1 dev: true + /string.fromcodepoint@0.2.1: + resolution: {integrity: sha512-n69H31OnxSGSZyZbgBlvYIXlrMhJQ0dQAX1js1QDhpaUH6zmU3QYlj07bCwCNlPOu3oRXIubGPl2gDGnHsiCqg==} + dev: true + /string_decoder@1.1.1: resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==} dependencies: @@ -8339,6 +9149,11 @@ packages: engines: {node: '>=4'} dev: true + /strip-bom@4.0.0: + resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==} + engines: {node: '>=8'} + dev: true + /strip-eof@1.0.0: resolution: {integrity: sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==} engines: {node: '>=0.10.0'} @@ -8361,6 +9176,11 @@ packages: engines: {node: '>=8'} dev: true + /strip-json-comments@5.0.1: + resolution: {integrity: sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw==} + engines: {node: '>=14.16'} + dev: true + /strip-literal@1.3.0: resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==} dependencies: @@ -8384,6 +9204,10 @@ packages: /stylis@4.2.0: resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} + /summary@2.1.0: + resolution: {integrity: sha512-nMIjMrd5Z2nuB2RZCKJfFMjgS3fygbeyGk9PxPPaJR1RIcyN9yn4A63Isovzm3ZtQuEkLBVgMdPup8UeLH7aQw==} + dev: true + /supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} @@ -8551,6 +9375,12 @@ packages: xtend: 4.0.2 dev: true + /through2@4.0.2: + resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==} + dependencies: + readable-stream: 3.6.2 + dev: true + /through@2.3.8: resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==} dev: true @@ -8656,6 +9486,16 @@ packages: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} + /to-no-case@1.0.2: + resolution: {integrity: sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==} + dev: true + + /to-pascal-case@1.0.0: + resolution: {integrity: sha512-QGMWHqM6xPrcQW57S23c5/3BbYb0Tbe9p+ur98ckRnGDwD4wbbtDiYI38CfmMKNB5Iv0REjs5SNDntTwvDxzZA==} + dependencies: + to-space-case: 1.0.0 + dev: true + /to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -8663,6 +9503,12 @@ packages: is-number: 7.0.0 dev: true + /to-space-case@1.0.0: + resolution: {integrity: sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==} + dependencies: + to-no-case: 1.0.2 + dev: true + /tough-cookie@4.1.3: resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==} engines: {node: '>=6'} @@ -8701,6 +9547,11 @@ packages: engines: {node: '>=4'} dev: true + /type-fest@0.6.0: + resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==} + engines: {node: '>=8'} + dev: true + /typescript@5.3.3: resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==} engines: {node: '>=14.17'} @@ -8738,6 +9589,12 @@ packages: /undici-types@5.26.5: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} + /unescape-js@1.1.4: + resolution: {integrity: sha512-42SD8NOQEhdYntEiUQdYq/1V/YHwr1HLwlHuTJB5InVVdOSbgI6xu8jK5q65yIzuFCfczzyDF/7hbGzVbyCw0g==} + dependencies: + string.fromcodepoint: 0.2.1 + dev: true + /unicode-canonical-property-names-ecmascript@2.0.0: resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==} engines: {node: '>=4'} @@ -8761,6 +9618,13 @@ packages: engines: {node: '>=4'} dev: true + /unique-string@2.0.0: + resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==} + engines: {node: '>=8'} + dependencies: + crypto-random-string: 2.0.0 + dev: true + /universalify@0.1.2: resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==} engines: {node: '>= 4.0.0'} @@ -8820,11 +9684,39 @@ packages: resolution: {integrity: sha512-T1ab131NkP3BfXB7KUSgV7Rhu81R2id+L6NaJ7NypAAG5iV6gXnPpQE5RK1fvb+3JYsPTL+ihWna5sr5RN9gaQ==} dev: true + /validate-npm-package-license@3.0.4: + resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==} + dependencies: + spdx-correct: 3.2.0 + spdx-expression-parse: 3.0.1 + dev: true + + /validate-npm-package-name@4.0.0: + resolution: {integrity: sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==} + engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + dependencies: + builtins: 5.0.1 + dev: true + + /validate-npm-package-name@5.0.0: + resolution: {integrity: sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + dependencies: + builtins: 5.0.1 + dev: true + /validator@13.11.0: resolution: {integrity: sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==} engines: {node: '>= 0.10'} dev: true + /version-selector-type@3.0.0: + resolution: {integrity: sha512-PSvMIZS7C1MuVNBXl/CDG2pZq8EXy/NW2dHIdm3bVP5N0PC8utDK8ttXLXj44Gn3J0lQE3U7Mpm1estAOd+eiA==} + engines: {node: '>=10.13'} + dependencies: + semver: 7.6.0 + dev: true + /vite-node@1.2.0(@types/node@18.19.7): resolution: {integrity: sha512-ETnQTHeAbbOxl7/pyBck9oAPZZZo+kYnFt1uQDD+hPReOc+wCjXw4r4jHriBRuVDB5isHmPXxrfc1yJnfBERqg==} engines: {node: ^18.0.0 || >=20.0.0} @@ -9038,6 +9930,10 @@ packages: - terser dev: true + /vlq@0.2.3: + resolution: {integrity: sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==} + dev: true + /vue-template-compiler@2.7.16: resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==} dependencies: @@ -9095,6 +9991,14 @@ packages: loose-envify: 1.4.0 dev: false + /wcwidth@1.0.1: + resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==} + requiresBuild: true + dependencies: + defaults: 1.0.4 + dev: true + optional: true + /webidl-conversions@7.0.0: resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} engines: {node: '>=12'} @@ -9174,6 +10078,14 @@ packages: isexe: 2.0.0 dev: true + /which@4.0.0: + resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==} + engines: {node: ^16.13.0 || >=18.0.0} + hasBin: true + dependencies: + isexe: 3.1.1 + dev: true + /why-is-node-running@2.2.2: resolution: {integrity: sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==} engines: {node: '>=8'} @@ -9277,6 +10189,11 @@ packages: yargs-parser: 21.1.1 dev: true + /yocto-queue@0.1.0: + resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} + engines: {node: '>=10'} + dev: true + /yocto-queue@1.0.0: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} @@ -9304,3 +10221,16 @@ packages: resolution: {integrity: sha512-40fpE2II+Cd3k8HWTWONfeKE2jL+P42iWJ1zzps5W51qcTsOUKM5Q5m2PFb0CLxlmFAaUuUdJGc3OfZy947v0w==} engines: {node: '>=0.2.0'} dev: true + + /zod-validation-error@3.0.0(zod@3.22.4): + resolution: {integrity: sha512-x+agsJJG9rvC7axF0xqTEdZhJkLHyIZkdOAWDJSmwGPzxNHMHwtU6w2yDOAAP6yuSfTAUhAMJRBfhVGY64ySEQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + zod: ^3.18.0 + dependencies: + zod: 3.22.4 + dev: true + + /zod@3.22.4: + resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==} + dev: true diff --git a/scripts/getRollupConfig.js b/scripts/getRollupConfig.js index ecdacbb11e..1dabe33dc6 100644 --- a/scripts/getRollupConfig.js +++ b/scripts/getRollupConfig.js @@ -2,6 +2,7 @@ import { resolve } from 'node:path' import { babel } from '@rollup/plugin-babel' +import commonJS from '@rollup/plugin-commonjs' import { visualizer } from 'rollup-plugin-visualizer' import terser from '@rollup/plugin-terser' // @ts-expect-error @@ -89,6 +90,7 @@ function mjs({ input, external, banner, outputFile }) { hydratable: true, }, }), + commonJS(), babelPlugin, nodeResolve({ extensions: ['.ts', '.tsx'] }), ], @@ -122,6 +124,7 @@ function esm({ input, external, banner, outputFile }) { hydratable: true, }, }), + commonJS(), babelPlugin, nodeResolve({ extensions: ['.ts', '.tsx'] }), ], @@ -153,6 +156,7 @@ function cjs({ input, external, banner }) { }, plugins: [ svelte(), + commonJS(), babelPlugin, nodeResolve({ extensions: ['.ts', '.tsx'] }), ], @@ -184,6 +188,7 @@ function umdDev({ input, external, globals, banner, jsName }) { }, plugins: [ svelte(), + commonJS(), babelPlugin, nodeResolve({ extensions: ['.ts', '.tsx'] }), forceEnvPlugin('development'), @@ -216,6 +221,7 @@ function umdProd({ input, external, globals, banner, jsName }) { }, plugins: [ svelte(), + commonJS(), babelPlugin, nodeResolve({ extensions: ['.ts', '.tsx'] }), forceEnvPlugin('production'), From 823899008934248d3a6c543e40ace925da21fc0c Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Fri, 16 Feb 2024 22:00:34 -0600 Subject: [PATCH 14/19] docs: replace react-dnd with dnd-kit in col-dnd example (#5358) --- docs/guide/column-ordering.md | 14 +- examples/react/column-dnd/package.json | 6 +- examples/react/column-dnd/src/index.css | 1 + examples/react/column-dnd/src/main.tsx | 346 +++++++++++++----------- examples/react/row-dnd/src/main.tsx | 6 +- pnpm-lock.yaml | 78 +----- 6 files changed, 219 insertions(+), 232 deletions(-) diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md index 12cf1a2883..4fe63d45fd 100644 --- a/docs/guide/column-ordering.md +++ b/docs/guide/column-ordering.md @@ -7,7 +7,7 @@ title: Column Ordering Want to skip to the implementation? Check out these examples: - [column-ordering](../framework/react/examples/column-ordering) -- [column-ordering-dnd](../framework/react/examples/column-dnd) +- [column-dnd](../framework/react/examples/column-dnd) ## API @@ -97,3 +97,15 @@ const handleDragEnd = (e: DragEvent) => { //use your dnd solution of choice ``` + +#### Drag and Drop Column Reordering Suggestions (React) + +There are undoubtedly many ways to implement drag and drop features along-side TanStack Table. Here are a few suggestions in order for you to not have a bad time: + +1. Do NOT try to use [`"react-dnd"`](https://react-dnd.github.io/react-dnd/docs/overview) _if you are using React 18 or newer_. React DnD was an important library for its time, but it now does not get updated very often, and it has incompatibilities with React 18, especially in React Strict Mode. It is still possible to get it to work, but there are newer alternatives that have better compatibility and are more actively maintained. React DnD's Provider may also interfere and conflict with any other DnD solutions you may want to try in your app. + +2. Use [`"@dnd-kit/core"`](https://dndkit.com/). DnD Kit is a modern, modular and lightweight drag and drop library that is highly compatible with the modern React ecosystem, and it works well with semantic `` markup. Both of the official TanStack DnD examples, [Column DnD](../framework/react/examples/column-dnd) and [Row DnD](../framework/react/examples/row-dnd), now use DnD Kit. + +3. Consider other DnD libraries like [`"react-beautiful-dnd"`](https://github.com/atlassian/react-beautiful-dnd), but be aware of their potentially large bundle sizes, maintenance status, and compatibility with `
` markup. + +4. Consider using native browser events and state management to implement lightweight drag and drop features. However, be aware that this approach may not be best for mobile users if you do not go the extra mile to implement proper touch events. [Material React Table V2](https://www.material-react-table.com/docs/examples/column-ordering) is an example of a library that implements TanStack Table with only browser drag and drop events such as `onDragStart`, `onDragEnd`, `onDragEnter` and no other dependencies. Browse its source code to see how it is done. \ No newline at end of file diff --git a/examples/react/column-dnd/package.json b/examples/react/column-dnd/package.json index 114164500e..6f88920bbf 100644 --- a/examples/react/column-dnd/package.json +++ b/examples/react/column-dnd/package.json @@ -9,11 +9,13 @@ "start": "vite" }, "dependencies": { + "@dnd-kit/core": "^6.1.0", + "@dnd-kit/modifiers": "^7.0.0", + "@dnd-kit/sortable": "^8.0.0", + "@dnd-kit/utilities": "^3.2.2", "@faker-js/faker": "^8.3.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", - "react-dnd": "^16.0.1", - "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0" }, "devDependencies": { diff --git a/examples/react/column-dnd/src/index.css b/examples/react/column-dnd/src/index.css index b2b3c10885..1bd4bee6e5 100644 --- a/examples/react/column-dnd/src/index.css +++ b/examples/react/column-dnd/src/index.css @@ -15,6 +15,7 @@ th { border-bottom: 1px solid lightgray; border-right: 1px solid lightgray; padding: 2px 4px; + text-align: left; } th div { diff --git a/examples/react/column-dnd/src/main.tsx b/examples/react/column-dnd/src/main.tsx index 00ab143231..9365e35ccb 100644 --- a/examples/react/column-dnd/src/main.tsx +++ b/examples/react/column-dnd/src/main.tsx @@ -1,203 +1,225 @@ -import React, { FC } from 'react' +import React, { CSSProperties } from 'react' import ReactDOM from 'react-dom/client' import './index.css' import { - Column, + Cell, ColumnDef, - ColumnOrderState, + Header, flexRender, getCoreRowModel, - Header, - Table, useReactTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' -import { DndProvider, useDrag, useDrop } from 'react-dnd' -import { HTML5Backend } from 'react-dnd-html5-backend' - -const defaultColumns: ColumnDef[] = [ - { - accessorKey: 'firstName', - id: 'firstName', - header: 'First Name', - cell: info => info.getValue(), - footer: props => props.column.id, - }, - { - accessorFn: row => row.lastName, - id: 'lastName', - cell: info => info.getValue(), - header: () => Last Name, - footer: props => props.column.id, - }, - { - accessorKey: 'age', - id: 'age', - header: 'Age', - footer: props => props.column.id, - }, - { - accessorKey: 'visits', - id: 'visits', - header: 'Visits', - footer: props => props.column.id, - }, - { - accessorKey: 'status', - id: 'status', - header: 'Status', - footer: props => props.column.id, - }, - { - accessorKey: 'progress', - id: 'progress', - header: 'Profile Progress', - footer: props => props.column.id, - }, -] - -const reorderColumn = ( - draggedColumnId: string, - targetColumnId: string, - columnOrder: string[] -): ColumnOrderState => { - columnOrder.splice( - columnOrder.indexOf(targetColumnId), - 0, - columnOrder.splice(columnOrder.indexOf(draggedColumnId), 1)[0] as string +// needed for table body level scope DnD setup +import { + DndContext, + KeyboardSensor, + MouseSensor, + TouchSensor, + closestCenter, + type DragEndEvent, + useSensor, + useSensors, +} from '@dnd-kit/core' +import { restrictToHorizontalAxis } from '@dnd-kit/modifiers' +import { + arrayMove, + SortableContext, + horizontalListSortingStrategy, +} from '@dnd-kit/sortable' + +// needed for row & cell level scope DnD setup +import { useSortable } from '@dnd-kit/sortable' +import { CSS } from '@dnd-kit/utilities' + +const DraggableTableHeader = ({ + header, +}: { + header: Header +}) => { + const { attributes, isDragging, listeners, setNodeRef, transform } = + useSortable({ + id: header.column.id, + }) + + const style: CSSProperties = { + opacity: isDragging ? 0.8 : 1, + position: 'relative', + transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing + transition: 'width transform 0.2s ease-in-out', + whiteSpace: 'nowrap', + width: header.column.getSize(), + zIndex: isDragging ? 1 : 0, + } + + return ( + ) - return [...columnOrder] } -const DraggableColumnHeader: FC<{ - header: Header - table: Table -}> = ({ header, table }) => { - const { getState, setColumnOrder } = table - const { columnOrder } = getState() - const { column } = header - - const [, dropRef] = useDrop({ - accept: 'column', - drop: (draggedColumn: Column) => { - const newColumnOrder = reorderColumn( - draggedColumn.id, - column.id, - columnOrder - ) - setColumnOrder(newColumnOrder) - }, +const DragAlongCell = ({ cell }: { cell: Cell }) => { + const { isDragging, setNodeRef, transform } = useSortable({ + id: cell.column.id, }) - const [{ isDragging }, dragRef, previewRef] = useDrag({ - collect: monitor => ({ - isDragging: monitor.isDragging(), - }), - item: () => column, - type: 'column', - }) + const style: CSSProperties = { + opacity: isDragging ? 0.8 : 1, + position: 'relative', + transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing + transition: 'width transform 0.2s ease-in-out', + width: cell.column.getSize(), + zIndex: isDragging ? 1 : 0, + } return ( - + ) } function App() { - const [data, setData] = React.useState(() => makeData(20)) - const [columns] = React.useState(() => [...defaultColumns]) - - const [columnOrder, setColumnOrder] = React.useState( - columns.map(column => column.id as string) //must start out with populated columnOrder so we can splice + const columns = React.useMemo[]>( + () => [ + { + accessorKey: 'firstName', + cell: info => info.getValue(), + id: 'firstName', + size: 150, + }, + { + accessorFn: row => row.lastName, + cell: info => info.getValue(), + header: () => Last Name, + id: 'lastName', + size: 150, + }, + { + accessorKey: 'age', + header: () => 'Age', + id: 'age', + size: 120, + }, + { + accessorKey: 'visits', + header: () => Visits, + id: 'visits', + size: 120, + }, + { + accessorKey: 'status', + header: 'Status', + id: 'status', + size: 150, + }, + { + accessorKey: 'progress', + header: 'Profile Progress', + id: 'progress', + size: 180, + }, + ], + [] ) - const regenerateData = () => setData(() => makeData(20)) + const [data, setData] = React.useState(() => makeData(20)) + const [columnOrder, setColumnOrder] = React.useState(() => + columns.map(c => c.id!) + ) - const resetOrder = () => - setColumnOrder(columns.map(column => column.id as string)) + const rerender = () => setData(() => makeData(20)) const table = useReactTable({ data, columns, + getCoreRowModel: getCoreRowModel(), state: { columnOrder, }, onColumnOrderChange: setColumnOrder, - getCoreRowModel: getCoreRowModel(), debugTable: true, debugHeaders: true, debugColumns: true, }) + // reorder columns after drag & drop + function handleDragEnd(event: DragEndEvent) { + const { active, over } = event + if (active && over && active.id !== over.id) { + setColumnOrder(columnOrder => { + const oldIndex = columnOrder.indexOf(active.id as string) + const newIndex = columnOrder.indexOf(over.id as string) + return arrayMove(columnOrder, oldIndex, newIndex) //this is just a splice util + }) + } + } + + const sensors = useSensors( + useSensor(MouseSensor, {}), + useSensor(TouchSensor, {}), + useSensor(KeyboardSensor, {}) + ) + return ( -
-
-
- - + // NOTE: This provider creates div elements, so don't nest inside of
+ {header.isPlaceholder + ? null + : flexRender(header.column.columnDef.header, header.getContext())} + + -
- {header.isPlaceholder - ? null - : flexRender(header.column.columnDef.header, header.getContext())} - -
-
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
elements + +
+
+
+ +
+
+
+ + {table.getHeaderGroups().map(headerGroup => ( + + + {headerGroup.headers.map(header => ( + + ))} + + + ))} + + + {table.getRowModel().rows.map(row => ( + + {row.getVisibleCells().map(cell => ( + + + + ))} + + ))} + +
+
{JSON.stringify(data, null, 2)}
-
- - - {table.getHeaderGroups().map(headerGroup => ( - - {headerGroup.headers.map(header => ( - - ))} - - ))} - - - {table.getRowModel().rows.map(row => ( - - {row.getVisibleCells().map(cell => ( - - ))} - - ))} - - - {table.getFooterGroups().map(footerGroup => ( - - {footerGroup.headers.map(header => ( - - ))} - - ))} - -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
- {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.footer, - header.getContext() - )} -
-
{JSON.stringify(table.getState().columnOrder, null, 2)}
-
+ ) } @@ -205,9 +227,7 @@ const rootElement = document.getElementById('root') if (!rootElement) throw new Error('Failed to find the root element') ReactDOM.createRoot(rootElement).render( - // //disabled for react-dnd preview bug for now - + - - // + ) diff --git a/examples/react/row-dnd/src/main.tsx b/examples/react/row-dnd/src/main.tsx index dd9d0ebddb..c8f3e23b00 100644 --- a/examples/react/row-dnd/src/main.tsx +++ b/examples/react/row-dnd/src/main.tsx @@ -55,8 +55,8 @@ const DraggableRow = ({ row }: { row: Row }) => { }) const style: CSSProperties = { - transform: CSS.Transform.toString(transform), - transition: transition, //let dnd-kit do its thing + transform: CSS.Transform.toString(transform), //let dnd-kit do its thing + transition: transition, opacity: isDragging ? 0.8 : 1, zIndex: isDragging ? 1 : 0, position: 'relative', @@ -132,7 +132,7 @@ function App() { debugColumns: true, }) - // reorder columns after drag & drop + // reorder rows after drag & drop function handleDragEnd(event: DragEndEvent) { const { active, over } = event if (active && over && active.id !== over.id) { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 41641fd1a8..cd90a5b15b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -181,6 +181,18 @@ importers: examples/react/column-dnd: dependencies: + '@dnd-kit/core': + specifier: ^6.1.0 + version: 6.1.0(react-dom@18.2.0)(react@18.2.0) + '@dnd-kit/modifiers': + specifier: ^7.0.0 + version: 7.0.0(@dnd-kit/core@6.1.0)(react@18.2.0) + '@dnd-kit/sortable': + specifier: ^8.0.0 + version: 8.0.0(@dnd-kit/core@6.1.0)(react@18.2.0) + '@dnd-kit/utilities': + specifier: ^3.2.2 + version: 3.2.2(react@18.2.0) '@faker-js/faker': specifier: ^8.3.1 version: 8.3.1 @@ -190,12 +202,6 @@ importers: react: specifier: ^18.2.0 version: 18.2.0 - react-dnd: - specifier: ^16.0.1 - version: 16.0.1(@types/node@18.19.7)(@types/react@18.2.48)(react@18.2.0) - react-dnd-html5-backend: - specifier: ^16.0.1 - version: 16.0.1 react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) @@ -4117,18 +4123,6 @@ packages: react: 18.2.0 dev: false - /@react-dnd/asap@5.0.2: - resolution: {integrity: sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==} - dev: false - - /@react-dnd/invariant@4.0.2: - resolution: {integrity: sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==} - dev: false - - /@react-dnd/shallowequal@4.0.2: - resolution: {integrity: sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==} - dev: false - /@restart/hooks@0.4.9(react@18.2.0): resolution: {integrity: sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==} peerDependencies: @@ -4787,6 +4781,7 @@ packages: resolution: {integrity: sha512-IGRJfoNX10N/PfrReRZ1br/7SQ+2vF/tK3KXNwzXz82D32z5dMQEoOlFew18nLSN+vMNcLY4GrKfzwi/yWI8/w==} dependencies: undici-types: 5.26.5 + dev: true /@types/node@20.11.2: resolution: {integrity: sha512-cZShBaVa+UO1LjWWBPmWRR4+/eY/JR/UIEcDlVsw3okjWEu+rB7/mH6X3B/L+qJVHDLjk9QW/y2upp9wp1yDXA==} @@ -6025,14 +6020,6 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dev: true - /dnd-core@16.0.1: - resolution: {integrity: sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==} - dependencies: - '@react-dnd/asap': 5.0.2 - '@react-dnd/invariant': 4.0.2 - redux: 4.2.1 - dev: false - /dom-accessibility-api@0.5.16: resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==} dev: true @@ -6271,6 +6258,7 @@ packages: /fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + dev: true /fast-glob@3.2.12: resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==} @@ -8271,37 +8259,6 @@ packages: warning: 4.0.3 dev: false - /react-dnd-html5-backend@16.0.1: - resolution: {integrity: sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==} - dependencies: - dnd-core: 16.0.1 - dev: false - - /react-dnd@16.0.1(@types/node@18.19.7)(@types/react@18.2.48)(react@18.2.0): - resolution: {integrity: sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==} - peerDependencies: - '@types/hoist-non-react-statics': '>= 3.3.1' - '@types/node': '>= 12' - '@types/react': '>= 16' - react: '>= 16.14' - peerDependenciesMeta: - '@types/hoist-non-react-statics': - optional: true - '@types/node': - optional: true - '@types/react': - optional: true - dependencies: - '@react-dnd/invariant': 4.0.2 - '@react-dnd/shallowequal': 4.0.2 - '@types/node': 18.19.7 - '@types/react': 18.2.48 - dnd-core: 16.0.1 - fast-deep-equal: 3.1.3 - hoist-non-react-statics: 3.3.2 - react: 18.2.0 - dev: false - /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -8431,12 +8388,6 @@ packages: strip-indent: 3.0.0 dev: true - /redux@4.2.1: - resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==} - dependencies: - '@babel/runtime': 7.21.0 - dev: false - /regenerate-unicode-properties@10.1.0: resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==} engines: {node: '>=4'} @@ -9588,6 +9539,7 @@ packages: /undici-types@5.26.5: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} + dev: true /unescape-js@1.1.4: resolution: {integrity: sha512-42SD8NOQEhdYntEiUQdYq/1V/YHwr1HLwlHuTJB5InVVdOSbgI6xu8jK5q65yIzuFCfczzyDF/7hbGzVbyCw0g==} From b78b99be0c7acac9c44c00b3d1b3a7b4fd15eabe Mon Sep 17 00:00:00 2001 From: Hephaestian <53147659+Hephaestian@users.noreply.github.com> Date: Sun, 18 Feb 2024 01:14:14 +1100 Subject: [PATCH 15/19] docs: more idiomatic solid and eslint cleanup for solid filters example (#5361) * docs: more idiomatic solid and eslint cleanup for solid filters example * prettier --------- Co-authored-by: Kevin Vandy --- examples/solid/filters/src/ColumnFilter.tsx | 156 ++++++++++---------- 1 file changed, 77 insertions(+), 79 deletions(-) diff --git a/examples/solid/filters/src/ColumnFilter.tsx b/examples/solid/filters/src/ColumnFilter.tsx index 4dac62112b..92891e148e 100644 --- a/examples/solid/filters/src/ColumnFilter.tsx +++ b/examples/solid/filters/src/ColumnFilter.tsx @@ -1,94 +1,92 @@ import { Column, Table } from '@tanstack/solid-table' import { debounce } from '@solid-primitives/scheduled' -import { createMemo } from 'solid-js' +import { createMemo, For, Show } from 'solid-js' -function ColumnFilter({ - column, - table, -}: { +function ColumnFilter(props: { column: Column table: Table }) { - const firstValue = table + const firstValue = props.table .getPreFilteredRowModel() - .flatRows[0]?.getValue(column.id) + .flatRows[0]?.getValue(props.column.id) - const columnFilterValue = column.getFilterValue() + const columnFilterValue = () => props.column.getFilterValue() - const sortedUniqueValues = createMemo( - () => - typeof firstValue === 'number' - ? [] - : Array.from(column.getFacetedUniqueValues().keys()).sort(), - [column.getFacetedUniqueValues()] + const sortedUniqueValues = createMemo(() => + typeof firstValue === 'number' + ? [] + : Array.from(props.column.getFacetedUniqueValues().keys()).sort() ) - const debounceColumnFilter = debounce( - value => column.setFilterValue(value), - 500 - ) - - return typeof firstValue === 'number' ? ( -
-
- - debounceColumnFilter((old: [number, number]) => [ - e.target.value, - old?.[1], - ]) - } - placeholder={`Min ${ - column.getFacetedMinMaxValues()?.[0] - ? `(${column.getFacetedMinMaxValues()?.[0]})` - : '' - }`} - className="w-24 border shadow rounded" - /> - - debounceColumnFilter((old: [number, number]) => [ - old?.[0], - e.target.value, - ]) - } - placeholder={`Max ${ - column.getFacetedMinMaxValues()?.[1] - ? `(${column.getFacetedMinMaxValues()?.[1]})` - : '' - }`} - className="w-24 border shadow rounded" - /> + return ( + + + + {(value: string) => + + props.column.setFilterValue(e.target.value), + 500 + )} + placeholder={`Search... (${props.column.getFacetedUniqueValues().size})`} + class="w-36 border shadow rounded" + list={`${props.column.id}list`} + /> +
+ } + > +
+
+ + props.column.setFilterValue((old: [number, number]) => [ + e.target.value, + old?.[1], + ]), + 500 + )} + placeholder={`Min ${ + props.column.getFacetedMinMaxValues()?.[0] + ? `(${props.column.getFacetedMinMaxValues()?.[0]})` + : '' + }`} + class="w-24 border shadow rounded" + /> + + props.column.setFilterValue((old: [number, number]) => [ + old?.[0], + e.target.value, + ]), + 500 + )} + placeholder={`Max ${ + props.column.getFacetedMinMaxValues()?.[1] + ? `(${props.column.getFacetedMinMaxValues()?.[1]})` + : '' + }`} + class="w-24 border shadow rounded" + /> +
-
-
- ) : ( - <> - - {sortedUniqueValues() - .slice(0, 5000) - .map((value: any) => ( - - debounceColumnFilter(e.target.value)} - placeholder={`Search... (${column.getFacetedUniqueValues().size})`} - className="w-36 border shadow rounded" - list={column.id + 'list'} - /> -
- + ) } From c42e95ab3d42333710b2fdf3773c93b0d68a8ada Mon Sep 17 00:00:00 2001 From: Massimo Cairo Date: Sat, 17 Feb 2024 16:14:46 +0200 Subject: [PATCH 16/19] docs: Remove extra $ in bash commands in installation.md (#5359) The `$` sign is currently part of the text copied, so the command fails when pasted in a terminal. --- docs/installation.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/installation.md b/docs/installation.md index 30aa444a24..1176bb33c8 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -9,29 +9,29 @@ Install your table adapter as a dependency using your favorite npm package manag ## React Table ```bash -$ npm install @tanstack/react-table +npm install @tanstack/react-table ``` ## Solid Table ```bash -$ npm install @tanstack/solid-table +npm install @tanstack/solid-table ``` ## Svelte Table ```bash -$ npm install @tanstack/svelte-table +npm install @tanstack/svelte-table ``` ## Vue Table ```bash -$ npm install @tanstack/vue-table +npm install @tanstack/vue-table ``` ## Table Core (no framework) ```bash -$ npm install @tanstack/table-core +npm install @tanstack/table-core ``` From e808abfd08f20f952662cd99bbfe5cba84f530af Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sat, 17 Feb 2024 18:06:36 -0600 Subject: [PATCH 17/19] docs: add column visibility docs (#5362) --- docs/api/core/cell.md | 2 +- docs/api/core/column-def.md | 2 +- docs/api/core/column.md | 2 +- docs/api/core/header-group.md | 2 +- docs/api/core/header.md | 2 +- docs/api/core/row.md | 2 +- docs/api/core/table.md | 2 +- docs/api/features/column-ordering.md | 2 +- docs/api/features/column-sizing.md | 2 +- docs/api/features/column-visibility.md | 2 +- docs/api/features/expanding.md | 2 +- docs/api/features/filters.md | 2 +- docs/api/features/grouping.md | 2 +- docs/api/features/pagination.md | 2 +- docs/api/features/pinning.md | 2 +- docs/api/features/row-selection.md | 2 +- docs/api/features/sorting.md | 2 +- docs/guide/cells.md | 2 +- docs/guide/column-defs.md | 2 +- docs/guide/column-filtering.md | 2 +- docs/guide/column-ordering.md | 2 +- docs/guide/column-pinning.md | 2 +- docs/guide/column-sizing.md | 2 +- docs/guide/column-visibility.md | 119 +++++++++++++++++- docs/guide/expanding.md | 2 +- docs/guide/faceted-values.md | 2 +- docs/guide/features.md | 2 +- docs/guide/filters.md | 2 +- docs/guide/fuzzy-filtering.md | 2 +- docs/guide/global-filtering.md | 2 +- docs/guide/grouping.md | 2 +- docs/guide/headers.md | 2 +- docs/guide/migrating.md | 2 +- docs/guide/pagination.md | 2 +- docs/guide/pinning.md | 2 +- docs/guide/row-models.md | 2 +- docs/guide/row-pinning.md | 2 +- docs/guide/row-selection.md | 2 +- docs/guide/rows.md | 2 +- docs/guide/sorting.md | 2 +- docs/guide/tables.md | 2 +- docs/guide/virtualization.md | 2 +- packages/table-core/src/features/Pinning.ts | 2 +- .../table-core/src/features/Visibility.ts | 5 + 44 files changed, 164 insertions(+), 44 deletions(-) diff --git a/docs/api/core/cell.md b/docs/api/core/cell.md index 8aa83eaabc..2eb84ab992 100644 --- a/docs/api/core/cell.md +++ b/docs/api/core/cell.md @@ -1,5 +1,5 @@ --- -title: Cell +title: Cell APIs --- These are **core** options and API properties for all cells. More options and API properties are available for other [table features](../../guide/features). diff --git a/docs/api/core/column-def.md b/docs/api/core/column-def.md index 17b2ee2aae..c6ef013aa7 100644 --- a/docs/api/core/column-def.md +++ b/docs/api/core/column-def.md @@ -1,5 +1,5 @@ --- -title: ColumnDef +title: ColumnDef APIs --- Column definitions are plain objects with the following options: diff --git a/docs/api/core/column.md b/docs/api/core/column.md index 4239ba1b54..42f56a004f 100644 --- a/docs/api/core/column.md +++ b/docs/api/core/column.md @@ -1,5 +1,5 @@ --- -title: Column +title: Column APIs --- These are **core** options and API properties for all columns. More options and API properties are available for other [table features](../../guide/features). diff --git a/docs/api/core/header-group.md b/docs/api/core/header-group.md index 8b38a4f220..f7a3af2192 100644 --- a/docs/api/core/header-group.md +++ b/docs/api/core/header-group.md @@ -1,5 +1,5 @@ --- -title: HeaderGroup +title: HeaderGroup APIs --- These are **core** options and API properties for all header groups. More options and API properties may be available for other [table features](../../guide/features). diff --git a/docs/api/core/header.md b/docs/api/core/header.md index 3d3e2070a5..d672c557ec 100644 --- a/docs/api/core/header.md +++ b/docs/api/core/header.md @@ -1,5 +1,5 @@ --- -title: Header +title: Header APIs --- These are **core** options and API properties for all headers. More options and API properties may be available for other [table features](../../guide/features). diff --git a/docs/api/core/row.md b/docs/api/core/row.md index 836d458607..d6f0567392 100644 --- a/docs/api/core/row.md +++ b/docs/api/core/row.md @@ -1,5 +1,5 @@ --- -title: Row +title: Row APIs --- These are **core** options and API properties for all rows. More options and API properties are available for other [table features](../../guide/features). diff --git a/docs/api/core/table.md b/docs/api/core/table.md index 9c7a74a277..902465e665 100644 --- a/docs/api/core/table.md +++ b/docs/api/core/table.md @@ -1,5 +1,5 @@ --- -title: Table +title: Table APIs --- ## `useReactTable` / `createSolidTable` / `useVueTable` / `createSvelteTable` diff --git a/docs/api/features/column-ordering.md b/docs/api/features/column-ordering.md index 48d4f8b77e..37bfb95337 100644 --- a/docs/api/features/column-ordering.md +++ b/docs/api/features/column-ordering.md @@ -1,5 +1,5 @@ --- -title: Column Ordering +title: Column Ordering APIs id: column-ordering --- diff --git a/docs/api/features/column-sizing.md b/docs/api/features/column-sizing.md index 4c44e21597..0bf7631be8 100644 --- a/docs/api/features/column-sizing.md +++ b/docs/api/features/column-sizing.md @@ -1,5 +1,5 @@ --- -title: Column Sizing +title: Column Sizing APIs id: column-sizing --- diff --git a/docs/api/features/column-visibility.md b/docs/api/features/column-visibility.md index ad9a9cc709..e1280e7c03 100644 --- a/docs/api/features/column-visibility.md +++ b/docs/api/features/column-visibility.md @@ -1,5 +1,5 @@ --- -title: Column Visibility +title: Column Visibility APIs id: column-visibility --- diff --git a/docs/api/features/expanding.md b/docs/api/features/expanding.md index 26d1ba6542..af7ab0db43 100644 --- a/docs/api/features/expanding.md +++ b/docs/api/features/expanding.md @@ -1,5 +1,5 @@ --- -title: Expanding +title: Expanding APIs id: expanding --- diff --git a/docs/api/features/filters.md b/docs/api/features/filters.md index 864fa89db6..4d0c5fe3f3 100644 --- a/docs/api/features/filters.md +++ b/docs/api/features/filters.md @@ -1,5 +1,5 @@ --- -title: Filters +title: Filter APIs id: filters --- diff --git a/docs/api/features/grouping.md b/docs/api/features/grouping.md index dfed1777bd..b9c21631fc 100644 --- a/docs/api/features/grouping.md +++ b/docs/api/features/grouping.md @@ -1,5 +1,5 @@ --- -title: Grouping +title: Grouping APIs id: grouping --- diff --git a/docs/api/features/pagination.md b/docs/api/features/pagination.md index f32dc0dcaa..8403e604de 100644 --- a/docs/api/features/pagination.md +++ b/docs/api/features/pagination.md @@ -1,5 +1,5 @@ --- -title: Pagination +title: Pagination APIs id: pagination --- diff --git a/docs/api/features/pinning.md b/docs/api/features/pinning.md index a4d8db8121..f9822d170d 100644 --- a/docs/api/features/pinning.md +++ b/docs/api/features/pinning.md @@ -1,5 +1,5 @@ --- -title: Pinning +title: Pinning APIs id: pinning --- diff --git a/docs/api/features/row-selection.md b/docs/api/features/row-selection.md index d8874b7048..4b39aa1ea0 100644 --- a/docs/api/features/row-selection.md +++ b/docs/api/features/row-selection.md @@ -1,5 +1,5 @@ --- -title: Row Selection +title: Row Selection APIs id: row-selection --- diff --git a/docs/api/features/sorting.md b/docs/api/features/sorting.md index 9fd28c9951..1e755889ad 100644 --- a/docs/api/features/sorting.md +++ b/docs/api/features/sorting.md @@ -1,5 +1,5 @@ --- -title: Sorting +title: Sorting APIs id: sorting --- diff --git a/docs/guide/cells.md b/docs/guide/cells.md index 6eb2f64ce7..689ba5f5a0 100644 --- a/docs/guide/cells.md +++ b/docs/guide/cells.md @@ -1,5 +1,5 @@ --- -title: Cells +title: Cells Guide --- ## API diff --git a/docs/guide/column-defs.md b/docs/guide/column-defs.md index 738bb98bd6..f4918fac01 100644 --- a/docs/guide/column-defs.md +++ b/docs/guide/column-defs.md @@ -1,5 +1,5 @@ --- -title: Columns +title: Columns Guide --- ## API diff --git a/docs/guide/column-filtering.md b/docs/guide/column-filtering.md index 6b6072a542..957f6269f8 100644 --- a/docs/guide/column-filtering.md +++ b/docs/guide/column-filtering.md @@ -1,5 +1,5 @@ --- -title: Column Filtering +title: Column Filtering Guide --- ## Examples diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md index 4fe63d45fd..2c60edd13e 100644 --- a/docs/guide/column-ordering.md +++ b/docs/guide/column-ordering.md @@ -1,5 +1,5 @@ --- -title: Column Ordering +title: Column Ordering Guide --- ## Examples diff --git a/docs/guide/column-pinning.md b/docs/guide/column-pinning.md index dcb6118d0f..d011d3f49c 100644 --- a/docs/guide/column-pinning.md +++ b/docs/guide/column-pinning.md @@ -1,5 +1,5 @@ --- -title: Column Pinning +title: Column Pinning Guide --- ## Examples diff --git a/docs/guide/column-sizing.md b/docs/guide/column-sizing.md index 8b810e55d7..4c35ffbab8 100644 --- a/docs/guide/column-sizing.md +++ b/docs/guide/column-sizing.md @@ -1,5 +1,5 @@ --- -title: Column Sizing +title: Column Sizing Guide --- ## Examples diff --git a/docs/guide/column-visibility.md b/docs/guide/column-visibility.md index c7126063bc..d65d42fff3 100644 --- a/docs/guide/column-visibility.md +++ b/docs/guide/column-visibility.md @@ -1,5 +1,5 @@ --- -title: Column Visibility +title: Column Visibility Guide --- ## Examples @@ -8,9 +8,124 @@ Want to skip to the implementation? Check out these examples: - [column-visibility](../framework/react/examples/column-visibility) - [column-ordering](../framework/react/examples/column-ordering) +- [sticky-column-pinning](../framework/react/examples/column-pinning-sticky) + +### Other Examples + +- [SolidJS column-visibility](../framework/solid/examples/column-visibility) +- [Svelte column-visibility](../framework/svelte/examples/column-visibility) ## API [Column Visibility API](../api/features/column-visibility) -## Column Visibility Guide \ No newline at end of file +## Column Visibility Guide + +The column visibility feature allows table columns to be hidden or shown dynamically. In previous versions of react-table, this feature was a static property on a column, but in v8, there is a dedicated `columnVisibility` state and APIs for managing column visibility dynamically. + +### Column Visibility State + +The `columnVisibility` state is a map of column IDs to boolean values. A column will be hidden if its ID is present in the map and the value is `false`. If the column ID is not present in the map, or the value is `true`, the column will be shown. + +```jsx +const [columnVisibility, setColumnVisibility] = useState({ + columnId1: true, + columnId2: false, //hide this column by default + columnId3: true, +}); + +const table = useReactTable({ + //... + state: { + columnVisibility, + //... + }, + onColumnVisibilityChange: setColumnVisibility, +}); +``` + +Alternatively, if you don't need to manage the column visibility state outside of the table, you can still set the initial default column visibility state using the `initialState` option. + +> **Note**: If `columnVisibility` is provided to both `initialState` and `state`, the `state` initialization will take precedence and `initialState` will be ignored. Do not provide `columnVisibility` to both `initialState` and `state`, only one or the other. + +```jsx +const table = useReactTable({ + //... + initialState: { + columnVisibility: { + columnId1: true, + columnId2: false, //hide this column by default + columnId3: true, + }, + //... + }, +}); +``` + +### Disable Hiding Columns + +By default, all columns can be hidden or shown. If you want to prevent certain columns from being hidden, you set the `enableHiding` column option to `false` for those columns. + +```jsx +const columns = [ + { + header: 'ID', + accessorKey: 'id', + enableHiding: false, // disable hiding for this column + }, + { + header: 'Name', + accessor: 'name', // can be hidden + }, +]; +``` + +### Column Visibility Toggle APIs + +There are several column API methods that are useful for rendering column visibility toggles in the UI. + +- `column.getCanHide` - Useful for disabling the visibility toggle for a column that has `enableHiding` set to `false`. +- `column.getIsVisible` - Useful for setting the initial state of the visibility toggle. +- `column.toggleVisibility` - Useful for toggling the visibility of a column. +- `column.getToggleVisibilityHandler` - Shortcut for hooking up the `column.toggleVisibility` method to a UI event handler. + +```jsx +{table.getAllColumns().map((column) => ( + +))} +``` + +### Column Visibility Aware Table APIs + +When you render your header, body, and footer cells, there are a lot of API options available. You may see APIs like `table.getAllLeafColumns` and `row.getAllCells`, but if you use these APIs, they will not take column visibility into account. Instead, you need to use the "visible" variants of these APIs, such as `table.getVisibleLeafColumns` and `row.getVisibleCells`. + +```jsx + + + + {table.getVisibleLeafColumns().map((column) => ( // takes column visibility into account + // + ))} + + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( // takes column visibility into account + // + ))} + + ))} + +
+``` + +If you are using the Header Group APIs, they will already take column visibility into account. diff --git a/docs/guide/expanding.md b/docs/guide/expanding.md index 09ec3a554b..5c278a870a 100644 --- a/docs/guide/expanding.md +++ b/docs/guide/expanding.md @@ -1,5 +1,5 @@ --- -title: Expanding +title: Expanding Guide --- ## Examples diff --git a/docs/guide/faceted-values.md b/docs/guide/faceted-values.md index 89158bf966..67bb8a630b 100644 --- a/docs/guide/faceted-values.md +++ b/docs/guide/faceted-values.md @@ -1,5 +1,5 @@ --- -title: Faceted Values +title: Faceted Values Guide --- ## Examples diff --git a/docs/guide/features.md b/docs/guide/features.md index a7b4e7f0ab..89ab465d1c 100644 --- a/docs/guide/features.md +++ b/docs/guide/features.md @@ -1,5 +1,5 @@ --- -title: Features +title: Features Guide --- TanStack Table comes with many features, each with their own associated options and API: diff --git a/docs/guide/filters.md b/docs/guide/filters.md index e2f3c1468b..bb2daf0290 100644 --- a/docs/guide/filters.md +++ b/docs/guide/filters.md @@ -1,5 +1,5 @@ --- -title: Filters +title: Filters Guide --- diff --git a/docs/guide/fuzzy-filtering.md b/docs/guide/fuzzy-filtering.md index b1bb38fe65..869518734f 100644 --- a/docs/guide/fuzzy-filtering.md +++ b/docs/guide/fuzzy-filtering.md @@ -1,5 +1,5 @@ --- -title: Fuzzy Filtering +title: Fuzzy Filtering Guide --- ## Examples diff --git a/docs/guide/global-filtering.md b/docs/guide/global-filtering.md index efff065990..02b8c0ef41 100644 --- a/docs/guide/global-filtering.md +++ b/docs/guide/global-filtering.md @@ -1,5 +1,5 @@ --- -title: Global Filtering +title: Global Filtering Guide --- ## Examples diff --git a/docs/guide/grouping.md b/docs/guide/grouping.md index 9f4c02631f..56fe25a7d2 100644 --- a/docs/guide/grouping.md +++ b/docs/guide/grouping.md @@ -1,5 +1,5 @@ --- -title: Grouping +title: Grouping Guide --- ## Examples diff --git a/docs/guide/headers.md b/docs/guide/headers.md index 43425c7dc9..d59e5fcd32 100644 --- a/docs/guide/headers.md +++ b/docs/guide/headers.md @@ -1,5 +1,5 @@ --- -title: Headers +title: Headers Guide --- ## API diff --git a/docs/guide/migrating.md b/docs/guide/migrating.md index f7895ace47..43b8429010 100644 --- a/docs/guide/migrating.md +++ b/docs/guide/migrating.md @@ -1,5 +1,5 @@ --- -title: Migrating to V8 +title: Migrating to V8 Guide --- ## Migrating to V8 diff --git a/docs/guide/pagination.md b/docs/guide/pagination.md index 4054ba1cb3..7b6c41595e 100644 --- a/docs/guide/pagination.md +++ b/docs/guide/pagination.md @@ -1,5 +1,5 @@ --- -title: Pagination +title: Pagination Guide --- ## Examples diff --git a/docs/guide/pinning.md b/docs/guide/pinning.md index e43b8fba15..aa8c116291 100644 --- a/docs/guide/pinning.md +++ b/docs/guide/pinning.md @@ -1,5 +1,5 @@ --- -title: Pinning +title: Pinning Guide --- diff --git a/docs/guide/row-models.md b/docs/guide/row-models.md index 92b6a3a71e..f51ddbb06e 100644 --- a/docs/guide/row-models.md +++ b/docs/guide/row-models.md @@ -1,5 +1,5 @@ --- -title: Row Models +title: Row Models Guide --- ## Row Models Guide diff --git a/docs/guide/row-pinning.md b/docs/guide/row-pinning.md index 14803a4c1f..442a81e3e5 100644 --- a/docs/guide/row-pinning.md +++ b/docs/guide/row-pinning.md @@ -1,5 +1,5 @@ --- -title: Row Pinning +title: Row Pinning Guide --- ## Examples diff --git a/docs/guide/row-selection.md b/docs/guide/row-selection.md index 1be5b5ebf1..0ffd62eca7 100644 --- a/docs/guide/row-selection.md +++ b/docs/guide/row-selection.md @@ -1,5 +1,5 @@ --- -title: Row Selection +title: Row Selection Guide --- ## Examples diff --git a/docs/guide/rows.md b/docs/guide/rows.md index b34ac42669..f25edd4dc3 100644 --- a/docs/guide/rows.md +++ b/docs/guide/rows.md @@ -1,5 +1,5 @@ --- -title: Rows +title: Rows Guide --- ## API diff --git a/docs/guide/sorting.md b/docs/guide/sorting.md index 6905e34593..769847931e 100644 --- a/docs/guide/sorting.md +++ b/docs/guide/sorting.md @@ -1,5 +1,5 @@ --- -title: Sorting +title: Sorting Guide --- ## Examples diff --git a/docs/guide/tables.md b/docs/guide/tables.md index 5090a4c27b..d4361f04a7 100644 --- a/docs/guide/tables.md +++ b/docs/guide/tables.md @@ -1,5 +1,5 @@ --- -title: Tables +title: Tables Guide --- ## API diff --git a/docs/guide/virtualization.md b/docs/guide/virtualization.md index 6abedd5383..2432c901df 100644 --- a/docs/guide/virtualization.md +++ b/docs/guide/virtualization.md @@ -1,5 +1,5 @@ --- -title: Virtualization +title: Virtualization Guide --- ## Examples diff --git a/packages/table-core/src/features/Pinning.ts b/packages/table-core/src/features/Pinning.ts index f942f1e3df..7f9c971de7 100644 --- a/packages/table-core/src/features/Pinning.ts +++ b/packages/table-core/src/features/Pinning.ts @@ -429,7 +429,7 @@ export const Pinning: TableFeature = { getMemoOptions(table.options, 'debugRows', 'getCenterVisibleCells') ) row.getLeftVisibleCells = memo( - () => [row._getAllVisibleCells(), table.getState().columnPinning.left, ,], + () => [row._getAllVisibleCells(), table.getState().columnPinning.left], (allCells, left) => { const cells = (left ?? []) .map(columnId => allCells.find(cell => cell.column.id === columnId)!) diff --git a/packages/table-core/src/features/Visibility.ts b/packages/table-core/src/features/Visibility.ts index c54069a8b4..55c020990f 100644 --- a/packages/table-core/src/features/Visibility.ts +++ b/packages/table-core/src/features/Visibility.ts @@ -18,6 +18,11 @@ export interface VisibilityTableState { } export interface VisibilityOptions { + /** + * Whether to enable column hiding. Defaults to `true`. + * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#enablehiding) + * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility) + */ enableHiding?: boolean /** * If provided, this function will be called with an `updaterFn` when `state.columnVisibility` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table. From 0d36056742c438419e4c627d078d866045fe33ba Mon Sep 17 00:00:00 2001 From: Daniel Immke <1744366+danielimmke@users.noreply.github.com> Date: Thu, 22 Feb 2024 15:34:32 -0600 Subject: [PATCH 18/19] docs: Add svelte filtering example (#5364) --- docs/config.json | 4 + examples/svelte/filtering/.gitignore | 8 ++ examples/svelte/filtering/README.md | 6 ++ examples/svelte/filtering/index.html | 14 +++ examples/svelte/filtering/package.json | 24 +++++ examples/svelte/filtering/src/App.svelte | 102 +++++++++++++++++++++ examples/svelte/filtering/src/index.css | 26 ++++++ examples/svelte/filtering/src/main.ts | 8 ++ examples/svelte/filtering/src/makeData.ts | 48 ++++++++++ examples/svelte/filtering/svelte.config.js | 5 + examples/svelte/filtering/tsconfig.json | 13 +++ examples/svelte/filtering/vite.config.js | 17 ++++ 12 files changed, 275 insertions(+) create mode 100644 examples/svelte/filtering/.gitignore create mode 100644 examples/svelte/filtering/README.md create mode 100644 examples/svelte/filtering/index.html create mode 100644 examples/svelte/filtering/package.json create mode 100644 examples/svelte/filtering/src/App.svelte create mode 100644 examples/svelte/filtering/src/index.css create mode 100644 examples/svelte/filtering/src/main.ts create mode 100644 examples/svelte/filtering/src/makeData.ts create mode 100644 examples/svelte/filtering/svelte.config.js create mode 100644 examples/svelte/filtering/tsconfig.json create mode 100644 examples/svelte/filtering/vite.config.js diff --git a/docs/config.json b/docs/config.json index 95c0ad6acb..e2393b7fdc 100644 --- a/docs/config.json +++ b/docs/config.json @@ -434,6 +434,10 @@ "to": "framework/svelte/examples/column-visibility", "label": "Column Visibility" }, + { + "to": "framework/svelte/examples/filtering", + "label": "Filtering" + }, { "to": "framework/svelte/examples/sorting", "label": "Sorting" diff --git a/examples/svelte/filtering/.gitignore b/examples/svelte/filtering/.gitignore new file mode 100644 index 0000000000..91c18232e2 --- /dev/null +++ b/examples/svelte/filtering/.gitignore @@ -0,0 +1,8 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local + +src/**/*.d.ts +src/**/*.map \ No newline at end of file diff --git a/examples/svelte/filtering/README.md b/examples/svelte/filtering/README.md new file mode 100644 index 0000000000..b168d3c4b1 --- /dev/null +++ b/examples/svelte/filtering/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/examples/svelte/filtering/index.html b/examples/svelte/filtering/index.html new file mode 100644 index 0000000000..6ab1dd7e51 --- /dev/null +++ b/examples/svelte/filtering/index.html @@ -0,0 +1,14 @@ + + + + + + Vite App + + + + +
+ + + diff --git a/examples/svelte/filtering/package.json b/examples/svelte/filtering/package.json new file mode 100644 index 0000000000..7e6c595996 --- /dev/null +++ b/examples/svelte/filtering/package.json @@ -0,0 +1,24 @@ +{ + "name": "tanstack-table-example-svelte-filtering", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview", + "test:types": "svelte-check --tsconfig ./tsconfig.json" + }, + "devDependencies": { + "@faker-js/faker": "^8.3.1", + "@rollup/plugin-replace": "^5.0.5", + "@sveltejs/vite-plugin-svelte": "^3.0.1", + "@tanstack/match-sorter-utils": "^8.11.8", + "@tanstack/svelte-table": "^8.12.0", + "@tsconfig/svelte": "^5.0.2", + "svelte": "^4.2.8", + "svelte-check": "^3.6.3", + "typescript": "5.3.3", + "vite": "^5.0.11" + } +} diff --git a/examples/svelte/filtering/src/App.svelte b/examples/svelte/filtering/src/App.svelte new file mode 100644 index 0000000000..e163a51722 --- /dev/null +++ b/examples/svelte/filtering/src/App.svelte @@ -0,0 +1,102 @@ + + $table.setGlobalFilter(String(e.target.value))} /> +
+ + + {#each $table.getHeaderGroups() as headerGroup} + + {#each headerGroup.headers as header, idx} + + {/each} + + {/each} + + + {#each $table.getRowModel().rows as row} + + {#each row.getVisibleCells() as cell} + + {/each} + + {/each} + +
+ {#if !header.isPlaceholder} + + {/if} +
+ +
+
+
"globalFilter": "{$table.getState().globalFilter}"
\ No newline at end of file diff --git a/examples/svelte/filtering/src/index.css b/examples/svelte/filtering/src/index.css new file mode 100644 index 0000000000..43c09e0f6b --- /dev/null +++ b/examples/svelte/filtering/src/index.css @@ -0,0 +1,26 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +table { + border: 1px solid lightgray; +} + +tbody { + border-bottom: 1px solid lightgray; +} + +th { + border-bottom: 1px solid lightgray; + border-right: 1px solid lightgray; + padding: 2px 4px; +} + +tfoot { + color: gray; +} + +tfoot th { + font-weight: normal; +} diff --git a/examples/svelte/filtering/src/main.ts b/examples/svelte/filtering/src/main.ts new file mode 100644 index 0000000000..4a5606b9a2 --- /dev/null +++ b/examples/svelte/filtering/src/main.ts @@ -0,0 +1,8 @@ +// @ts-ignore +import App from './App.svelte' + +const app = new App({ + target: document.getElementById('root')!, +}) + +export default app diff --git a/examples/svelte/filtering/src/makeData.ts b/examples/svelte/filtering/src/makeData.ts new file mode 100644 index 0000000000..331dd1eb19 --- /dev/null +++ b/examples/svelte/filtering/src/makeData.ts @@ -0,0 +1,48 @@ +import { faker } from '@faker-js/faker' + +export type Person = { + firstName: string + lastName: string + age: number + visits: number + progress: number + status: 'relationship' | 'complicated' | 'single' + subRows?: Person[] +} + +const range = (len: number) => { + const arr: number[] = [] + for (let i = 0; i < len; i++) { + arr.push(i) + } + return arr +} + +const newPerson = (): Person => { + return { + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + age: faker.number.int(40), + visits: faker.number.int(1000), + progress: faker.number.int(100), + status: faker.helpers.shuffle([ + 'relationship', + 'complicated', + 'single', + ])[0]!, + } +} + +export function makeData(...lens: number[]) { + const makeDataLevel = (depth = 0): Person[] => { + const len = lens[depth]! + return range(len).map((d): Person => { + return { + ...newPerson(), + subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined, + } + }) + } + + return makeDataLevel() +} diff --git a/examples/svelte/filtering/svelte.config.js b/examples/svelte/filtering/svelte.config.js new file mode 100644 index 0000000000..8abe4369b8 --- /dev/null +++ b/examples/svelte/filtering/svelte.config.js @@ -0,0 +1,5 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' + +export default { + preprocess: vitePreprocess(), +} diff --git a/examples/svelte/filtering/tsconfig.json b/examples/svelte/filtering/tsconfig.json new file mode 100644 index 0000000000..e44d928411 --- /dev/null +++ b/examples/svelte/filtering/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + "compilerOptions": { + "target": "esnext", + "useDefineForClassFields": true, + "module": "esnext", + "resolveJsonModule": true, + "allowJs": true, + "checkJs": true, + "isolatedModules": true + }, + "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] +} diff --git a/examples/svelte/filtering/vite.config.js b/examples/svelte/filtering/vite.config.js new file mode 100644 index 0000000000..c6ced40a24 --- /dev/null +++ b/examples/svelte/filtering/vite.config.js @@ -0,0 +1,17 @@ +import { defineConfig } from 'vite' +import { svelte } from '@sveltejs/vite-plugin-svelte' +import rollupReplace from '@rollup/plugin-replace' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + rollupReplace({ + preventAssignment: true, + values: { + __DEV__: JSON.stringify(true), + 'process.env.NODE_ENV': JSON.stringify('development'), + }, + }), + svelte(), + ], +}) From 631886b8a0def575250c447f96a9ff5f6fdcfed1 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Fri, 23 Feb 2024 14:30:10 -0600 Subject: [PATCH 19/19] chore: add and configure size-limit (#5370) * chore: add and configure size-limit * format * fix new svelte example --- examples/svelte/filtering/src/App.svelte | 67 ++-- examples/svelte/filtering/src/main.ts | 13 + knip.json | 1 + package.json | 18 +- pnpm-lock.yaml | 384 ++++++++++++++++++++++- 5 files changed, 446 insertions(+), 37 deletions(-) diff --git a/examples/svelte/filtering/src/App.svelte b/examples/svelte/filtering/src/App.svelte index e163a51722..9a7f5de097 100644 --- a/examples/svelte/filtering/src/App.svelte +++ b/examples/svelte/filtering/src/App.svelte @@ -1,30 +1,26 @@ - $table.setGlobalFilter(String(e.target.value))} /> + +
@@ -99,4 +108,4 @@ import './index.css';
-
"globalFilter": "{$table.getState().globalFilter}"
\ No newline at end of file +
"globalFilter": "{$table.getState().globalFilter}"
diff --git a/examples/svelte/filtering/src/main.ts b/examples/svelte/filtering/src/main.ts index 4a5606b9a2..61bf4ae49f 100644 --- a/examples/svelte/filtering/src/main.ts +++ b/examples/svelte/filtering/src/main.ts @@ -1,6 +1,19 @@ // @ts-ignore import App from './App.svelte' +import type { FilterFn } from '@tanstack/svelte-table' + +import type { RankingInfo } from '@tanstack/match-sorter-utils' + +declare module '@tanstack/svelte-table' { + interface FilterFns { + fuzzy: FilterFn + } + interface FilterMeta { + itemRank: RankingInfo + } +} + const app = new App({ target: document.getElementById('root')!, }) diff --git a/knip.json b/knip.json index 06c48ae872..6ea594f395 100644 --- a/knip.json +++ b/knip.json @@ -1,5 +1,6 @@ { "$schema": "https://unpkg.com/knip@4/schema.json", + "ignoreDependencies": ["size-limit", "@size-limit/preset-small-lib"], "ignoreWorkspaces": ["examples/**"], "workspaces": { "packages/match-sorter-utils": { diff --git a/package.json b/package.json index bf58b8b28f..4b117034d3 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "table", + "namespace": "@tanstack", "private": true, "repository": "https://github.com/tanstack/table.git", "packageManager": "pnpm@8.12.1", @@ -16,8 +17,8 @@ "test:lib:dev": "pnpm test:lib && nx watch --all -- pnpm test:lib", "test:types": "nx affected --targets=test:types --exclude=examples/**", "test:knip": "knip", - "build": "nx affected --targets=build --exclude=examples/**", - "build:all": "nx run-many --targets=build --exclude=examples/**", + "build": "nx affected --targets=build --exclude=examples/** && size-limit", + "build:all": "nx run-many --targets=build --exclude=examples/** && size-limit", "watch": "pnpm run build:all && nx watch --all -- pnpm run build:all", "dev": "pnpm run watch", "prettier": "prettier --ignore-unknown '**/*'", @@ -31,7 +32,16 @@ "test:sherif" ] }, - "namespace": "@tanstack", + "size-limit": [ + { + "path": "packages/table-core/build/lib/index.js", + "limit": "16 KB" + }, + { + "path": "packages/table-core/build/lib/index.mjs", + "limit": "15 KB" + } + ], "devDependencies": { "@babel/core": "^7.23.7", "@babel/preset-env": "^7.23.8", @@ -43,6 +53,7 @@ "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-replace": "^5.0.5", "@rollup/plugin-terser": "^0.4.4", + "@size-limit/preset-small-lib": "^11.0.2", "@tanstack/config": "^0.4.2", "@testing-library/jest-dom": "^6.2.0", "@testing-library/react": "^14.1.2", @@ -63,6 +74,7 @@ "rollup-plugin-svelte": "^7.1.6", "rollup-plugin-visualizer": "^5.12.0", "sherif": "^0.7.0", + "size-limit": "^11.0.2", "svelte": "^4.2.8", "typescript": "5.3.3", "vitest": "^1.2.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cd90a5b15b..89a7b7d38c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,9 +38,12 @@ importers: '@rollup/plugin-terser': specifier: ^0.4.4 version: 0.4.4(rollup@4.9.5) + '@size-limit/preset-small-lib': + specifier: ^11.0.2 + version: 11.0.2(size-limit@11.0.2) '@tanstack/config': specifier: ^0.4.2 - version: 0.4.2(@types/node@18.19.7)(esbuild@0.19.10)(rollup@4.9.5)(typescript@5.3.3)(vite@5.0.11) + version: 0.4.2(@types/node@18.19.7)(esbuild@0.19.12)(rollup@4.9.5)(typescript@5.3.3)(vite@5.0.11) '@testing-library/jest-dom': specifier: ^6.2.0 version: 6.2.0(vitest@1.2.0) @@ -98,6 +101,9 @@ importers: sherif: specifier: ^0.7.0 version: 0.7.0 + size-limit: + specifier: ^11.0.2 + version: 11.0.2 svelte: specifier: ^4.2.8 version: 4.2.8 @@ -1371,6 +1377,39 @@ importers: specifier: ^5.0.11 version: 5.0.11(@types/node@18.19.7) + examples/svelte/filtering: + devDependencies: + '@faker-js/faker': + specifier: ^8.3.1 + version: 8.3.1 + '@rollup/plugin-replace': + specifier: ^5.0.5 + version: 5.0.5(rollup@4.9.5) + '@sveltejs/vite-plugin-svelte': + specifier: ^3.0.1 + version: 3.0.1(svelte@4.2.8)(vite@5.0.11) + '@tanstack/match-sorter-utils': + specifier: ^8.11.8 + version: link:../../../packages/match-sorter-utils + '@tanstack/svelte-table': + specifier: ^8.12.0 + version: link:../../../packages/svelte-table + '@tsconfig/svelte': + specifier: ^5.0.2 + version: 5.0.2 + svelte: + specifier: ^4.2.8 + version: 4.2.8 + svelte-check: + specifier: ^3.6.3 + version: 3.6.3(@babel/core@7.23.7)(svelte@4.2.8) + typescript: + specifier: 5.3.3 + version: 5.3.3 + vite: + specifier: ^5.0.11 + version: 5.0.11(@types/node@18.19.7) + examples/svelte/sorting: devDependencies: '@faker-js/faker': @@ -3224,6 +3263,15 @@ packages: dev: true optional: true + /@esbuild/aix-ppc64@0.19.12: + resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [aix] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm64@0.19.10: resolution: {integrity: sha512-1X4CClKhDgC3by7k8aOWZeBXQX8dHT5QAMCAQDArCLaYfkppoARvh0fit3X2Qs+MXDngKcHv6XXyQCpY0hkK1Q==} engines: {node: '>=12'} @@ -3233,6 +3281,15 @@ packages: dev: true optional: true + /@esbuild/android-arm64@0.19.12: + resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-arm@0.19.10: resolution: {integrity: sha512-7W0bK7qfkw1fc2viBfrtAEkDKHatYfHzr/jKAHNr9BvkYDXPcC6bodtm8AyLJNNuqClLNaeTLuwURt4PRT9d7w==} engines: {node: '>=12'} @@ -3242,6 +3299,15 @@ packages: dev: true optional: true + /@esbuild/android-arm@0.19.12: + resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==} + engines: {node: '>=12'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/android-x64@0.19.10: resolution: {integrity: sha512-O/nO/g+/7NlitUxETkUv/IvADKuZXyH4BHf/g/7laqKC4i/7whLpB0gvpPc2zpF0q9Q6FXS3TS75QHac9MvVWw==} engines: {node: '>=12'} @@ -3251,6 +3317,15 @@ packages: dev: true optional: true + /@esbuild/android-x64@0.19.12: + resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-arm64@0.19.10: resolution: {integrity: sha512-YSRRs2zOpwypck+6GL3wGXx2gNP7DXzetmo5pHXLrY/VIMsS59yKfjPizQ4lLt5vEI80M41gjm2BxrGZ5U+VMA==} engines: {node: '>=12'} @@ -3260,6 +3335,15 @@ packages: dev: true optional: true + /@esbuild/darwin-arm64@0.19.12: + resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/darwin-x64@0.19.10: resolution: {integrity: sha512-alfGtT+IEICKtNE54hbvPg13xGBe4GkVxyGWtzr+yHO7HIiRJppPDhOKq3zstTcVf8msXb/t4eavW3jCDpMSmA==} engines: {node: '>=12'} @@ -3269,6 +3353,15 @@ packages: dev: true optional: true + /@esbuild/darwin-x64@0.19.12: + resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-arm64@0.19.10: resolution: {integrity: sha512-dMtk1wc7FSH8CCkE854GyGuNKCewlh+7heYP/sclpOG6Cectzk14qdUIY5CrKDbkA/OczXq9WesqnPl09mj5dg==} engines: {node: '>=12'} @@ -3278,6 +3371,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-arm64@0.19.12: + resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/freebsd-x64@0.19.10: resolution: {integrity: sha512-G5UPPspryHu1T3uX8WiOEUa6q6OlQh6gNl4CO4Iw5PS+Kg5bVggVFehzXBJY6X6RSOMS8iXDv2330VzaObm4Ag==} engines: {node: '>=12'} @@ -3287,6 +3389,15 @@ packages: dev: true optional: true + /@esbuild/freebsd-x64@0.19.12: + resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm64@0.19.10: resolution: {integrity: sha512-QxaouHWZ+2KWEj7cGJmvTIHVALfhpGxo3WLmlYfJ+dA5fJB6lDEIg+oe/0//FuyVHuS3l79/wyBxbHr0NgtxJQ==} engines: {node: '>=12'} @@ -3296,6 +3407,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm64@0.19.12: + resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-arm@0.19.10: resolution: {integrity: sha512-j6gUW5aAaPgD416Hk9FHxn27On28H4eVI9rJ4az7oCGTFW48+LcgNDBN+9f8rKZz7EEowo889CPKyeaD0iw9Kg==} engines: {node: '>=12'} @@ -3305,6 +3425,15 @@ packages: dev: true optional: true + /@esbuild/linux-arm@0.19.12: + resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ia32@0.19.10: resolution: {integrity: sha512-4ub1YwXxYjj9h1UIZs2hYbnTZBtenPw5NfXCRgEkGb0b6OJ2gpkMvDqRDYIDRjRdWSe/TBiZltm3Y3Q8SN1xNg==} engines: {node: '>=12'} @@ -3314,6 +3443,15 @@ packages: dev: true optional: true + /@esbuild/linux-ia32@0.19.12: + resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-loong64@0.19.10: resolution: {integrity: sha512-lo3I9k+mbEKoxtoIbM0yC/MZ1i2wM0cIeOejlVdZ3D86LAcFXFRdeuZmh91QJvUTW51bOK5W2BznGNIl4+mDaA==} engines: {node: '>=12'} @@ -3323,6 +3461,15 @@ packages: dev: true optional: true + /@esbuild/linux-loong64@0.19.12: + resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==} + engines: {node: '>=12'} + cpu: [loong64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-mips64el@0.19.10: resolution: {integrity: sha512-J4gH3zhHNbdZN0Bcr1QUGVNkHTdpijgx5VMxeetSk6ntdt+vR1DqGmHxQYHRmNb77tP6GVvD+K0NyO4xjd7y4A==} engines: {node: '>=12'} @@ -3332,6 +3479,15 @@ packages: dev: true optional: true + /@esbuild/linux-mips64el@0.19.12: + resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-ppc64@0.19.10: resolution: {integrity: sha512-tgT/7u+QhV6ge8wFMzaklOY7KqiyitgT1AUHMApau32ZlvTB/+efeCtMk4eXS+uEymYK249JsoiklZN64xt6oQ==} engines: {node: '>=12'} @@ -3341,6 +3497,15 @@ packages: dev: true optional: true + /@esbuild/linux-ppc64@0.19.12: + resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-riscv64@0.19.10: resolution: {integrity: sha512-0f/spw0PfBMZBNqtKe5FLzBDGo0SKZKvMl5PHYQr3+eiSscfJ96XEknCe+JoOayybWUFQbcJTrk946i3j9uYZA==} engines: {node: '>=12'} @@ -3350,6 +3515,15 @@ packages: dev: true optional: true + /@esbuild/linux-riscv64@0.19.12: + resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-s390x@0.19.10: resolution: {integrity: sha512-pZFe0OeskMHzHa9U38g+z8Yx5FNCLFtUnJtQMpwhS+r4S566aK2ci3t4NCP4tjt6d5j5uo4h7tExZMjeKoehAA==} engines: {node: '>=12'} @@ -3359,6 +3533,15 @@ packages: dev: true optional: true + /@esbuild/linux-s390x@0.19.12: + resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/linux-x64@0.19.10: resolution: {integrity: sha512-SpYNEqg/6pZYoc+1zLCjVOYvxfZVZj6w0KROZ3Fje/QrM3nfvT2llI+wmKSrWuX6wmZeTapbarvuNNK/qepSgA==} engines: {node: '>=12'} @@ -3368,6 +3551,15 @@ packages: dev: true optional: true + /@esbuild/linux-x64@0.19.12: + resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + /@esbuild/netbsd-x64@0.19.10: resolution: {integrity: sha512-ACbZ0vXy9zksNArWlk2c38NdKg25+L9pr/mVaj9SUq6lHZu/35nx2xnQVRGLrC1KKQqJKRIB0q8GspiHI3J80Q==} engines: {node: '>=12'} @@ -3377,6 +3569,15 @@ packages: dev: true optional: true + /@esbuild/netbsd-x64@0.19.12: + resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/openbsd-x64@0.19.10: resolution: {integrity: sha512-PxcgvjdSjtgPMiPQrM3pwSaG4kGphP+bLSb+cihuP0LYdZv1epbAIecHVl5sD3npkfYBZ0ZnOjR878I7MdJDFg==} engines: {node: '>=12'} @@ -3386,6 +3587,15 @@ packages: dev: true optional: true + /@esbuild/openbsd-x64@0.19.12: + resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true + optional: true + /@esbuild/sunos-x64@0.19.10: resolution: {integrity: sha512-ZkIOtrRL8SEJjr+VHjmW0znkPs+oJXhlJbNwfI37rvgeMtk3sxOQevXPXjmAPZPigVTncvFqLMd+uV0IBSEzqA==} engines: {node: '>=12'} @@ -3395,6 +3605,15 @@ packages: dev: true optional: true + /@esbuild/sunos-x64@0.19.12: + resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-arm64@0.19.10: resolution: {integrity: sha512-+Sa4oTDbpBfGpl3Hn3XiUe4f8TU2JF7aX8cOfqFYMMjXp6ma6NJDztl5FDG8Ezx0OjwGikIHw+iA54YLDNNVfw==} engines: {node: '>=12'} @@ -3404,6 +3623,15 @@ packages: dev: true optional: true + /@esbuild/win32-arm64@0.19.12: + resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-ia32@0.19.10: resolution: {integrity: sha512-EOGVLK1oWMBXgfttJdPHDTiivYSjX6jDNaATeNOaCOFEVcfMjtbx7WVQwPSE1eIfCp/CaSF2nSrDtzc4I9f8TQ==} engines: {node: '>=12'} @@ -3413,6 +3641,15 @@ packages: dev: true optional: true + /@esbuild/win32-ia32@0.19.12: + resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@esbuild/win32-x64@0.19.10: resolution: {integrity: sha512-whqLG6Sc70AbU73fFYvuYzaE4MNMBIlR1Y/IrUeOXFrWHxBEjjbZaQ3IXIQS8wJdAzue2GwYZCjOrgrU1oUHoA==} engines: {node: '>=12'} @@ -3422,6 +3659,15 @@ packages: dev: true optional: true + /@esbuild/win32-x64@0.19.12: + resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /@faker-js/faker@8.3.1: resolution: {integrity: sha512-FdgpFxY6V6rLZE9mmIBb9hM0xpfvQOSNOLnzolzKwsE1DH+gC7lEKV1p1IbR0lAYyvYd5a4u3qWJzowUkw1bIw==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'} @@ -4523,6 +4769,41 @@ packages: resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} dev: true + /@sindresorhus/merge-streams@2.3.0: + resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==} + engines: {node: '>=18'} + dev: true + + /@size-limit/esbuild@11.0.2(size-limit@11.0.2): + resolution: {integrity: sha512-67p+y+wkMBJJegLZUp1X3v1YEvgGSbbAukFbHtxJ1c/DTj/ApiHvtgMzvA5ij+A5UOay+jSU4bXetpNJlUK3Ow==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + size-limit: 11.0.2 + dependencies: + esbuild: 0.19.12 + nanoid: 5.0.6 + size-limit: 11.0.2 + dev: true + + /@size-limit/file@11.0.2(size-limit@11.0.2): + resolution: {integrity: sha512-874lrMtWYRL+xb/6xzejjwD+krfHTOo+2uFGpZfJScvuNv91Ni2O7k0o09zC70VzCYBGkXquV92ln/H+/ognGg==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + size-limit: 11.0.2 + dependencies: + size-limit: 11.0.2 + dev: true + + /@size-limit/preset-small-lib@11.0.2(size-limit@11.0.2): + resolution: {integrity: sha512-Yo+RRHCLz29PMmRXzq69E3LjiAivspF2XRGdpZ+QdeFOotd3hBYVMJC9GDF3tEigPtfvEJk4L8YLlUK+SE90FA==} + peerDependencies: + size-limit: 11.0.2 + dependencies: + '@size-limit/esbuild': 11.0.2(size-limit@11.0.2) + '@size-limit/file': 11.0.2(size-limit@11.0.2) + size-limit: 11.0.2 + dev: true + /@snyk/github-codeowners@1.1.0: resolution: {integrity: sha512-lGFf08pbkEac0NYgVf4hdANpAgApRjNByLXB+WBip3qj1iendOIyAwP2GKkKbQMNVy2r1xxDf0ssfWscoiC+Vw==} engines: {node: '>=8.10'} @@ -4583,7 +4864,7 @@ packages: tslib: 2.6.2 dev: false - /@tanstack/config@0.4.2(@types/node@18.19.7)(esbuild@0.19.10)(rollup@4.9.5)(typescript@5.3.3)(vite@5.0.11): + /@tanstack/config@0.4.2(@types/node@18.19.7)(esbuild@0.19.12)(rollup@4.9.5)(typescript@5.3.3)(vite@5.0.11): resolution: {integrity: sha512-PHlybqEA/4cJmu5aB9Yw4/OmdBqQY8pMW9Q1f3IJymAj0hRcTTfVRHMeI9yvEEP9lO74FN2EhIAwsKiXQb+FkQ==} engines: {node: '>=18'} hasBin: true @@ -4592,7 +4873,7 @@ packages: chalk: 5.3.0 commander: 11.1.0 current-git-branch: 1.1.0 - esbuild-register: 3.5.0(esbuild@0.19.10) + esbuild-register: 3.5.0(esbuild@0.19.12) git-log-parser: 1.2.0 interpret: 3.1.1 jsonfile: 6.1.0 @@ -5567,6 +5848,11 @@ packages: semver: 7.6.0 dev: true + /bytes-iec@3.1.1: + resolution: {integrity: sha512-fey6+4jDK7TFtFg/klGSvNKJctyU7n2aQdnM+CO0ruLPbqqMOM8Tio0Pc+deqUeVKX1tL5DQep1zQ7+37aTAsA==} + engines: {node: '>= 0.8'} + dev: true + /cac@6.7.14: resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} engines: {node: '>=8'} @@ -6142,13 +6428,13 @@ packages: resolution: {integrity: sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==} dev: true - /esbuild-register@3.5.0(esbuild@0.19.10): + /esbuild-register@3.5.0(esbuild@0.19.12): resolution: {integrity: sha512-+4G/XmakeBAsvJuDugJvtyF1x+XJT4FMocynNpxrvEBViirpfUn2PgNpCHedfWhF4WokNsO/OvMKrmJOIJsI5A==} peerDependencies: esbuild: '>=0.12 <1' dependencies: debug: 4.3.4 - esbuild: 0.19.10 + esbuild: 0.19.12 transitivePeerDependencies: - supports-color dev: true @@ -6184,6 +6470,37 @@ packages: '@esbuild/win32-x64': 0.19.10 dev: true + /esbuild@0.19.12: + resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/aix-ppc64': 0.19.12 + '@esbuild/android-arm': 0.19.12 + '@esbuild/android-arm64': 0.19.12 + '@esbuild/android-x64': 0.19.12 + '@esbuild/darwin-arm64': 0.19.12 + '@esbuild/darwin-x64': 0.19.12 + '@esbuild/freebsd-arm64': 0.19.12 + '@esbuild/freebsd-x64': 0.19.12 + '@esbuild/linux-arm': 0.19.12 + '@esbuild/linux-arm64': 0.19.12 + '@esbuild/linux-ia32': 0.19.12 + '@esbuild/linux-loong64': 0.19.12 + '@esbuild/linux-mips64el': 0.19.12 + '@esbuild/linux-ppc64': 0.19.12 + '@esbuild/linux-riscv64': 0.19.12 + '@esbuild/linux-s390x': 0.19.12 + '@esbuild/linux-x64': 0.19.12 + '@esbuild/netbsd-x64': 0.19.12 + '@esbuild/openbsd-x64': 0.19.12 + '@esbuild/sunos-x64': 0.19.12 + '@esbuild/win32-arm64': 0.19.12 + '@esbuild/win32-ia32': 0.19.12 + '@esbuild/win32-x64': 0.19.12 + dev: true + /escalade@3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} @@ -6592,6 +6909,18 @@ packages: engines: {node: '>=4'} dev: true + /globby@14.0.1: + resolution: {integrity: sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==} + engines: {node: '>=18'} + dependencies: + '@sindresorhus/merge-streams': 2.3.0 + fast-glob: 3.3.2 + ignore: 5.2.4 + path-type: 5.0.0 + slash: 5.1.0 + unicorn-magic: 0.1.0 + dev: true + /gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} dependencies: @@ -7314,6 +7643,11 @@ packages: resolve: 1.22.1 dev: true + /lilconfig@3.1.1: + resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==} + engines: {node: '>=14'} + dev: true + /lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} @@ -7625,6 +7959,18 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + /nanoid@5.0.6: + resolution: {integrity: sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==} + engines: {node: ^18 || >=20} + hasBin: true + dev: true + + /nanospinner@1.1.0: + resolution: {integrity: sha512-yFvNYMig4AthKYfHFl1sLj7B2nkHL4lzdig4osvl9/LdGbXwrdFRoqBS98gsEsOakr0yH+r5NZ/1Y9gdVB8trA==} + dependencies: + picocolors: 1.0.0 + dev: true + /ndjson@2.0.0: resolution: {integrity: sha512-nGl7LRGrzugTtaFcJMhLbpzJM6XdivmbkdlaGcrk/LXg2KL/YBC6z1g70xh0/al+oFuVFP8N8kiWRucmeEH/qQ==} engines: {node: '>=10'} @@ -8026,6 +8372,11 @@ packages: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} engines: {node: '>=8'} + /path-type@5.0.0: + resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==} + engines: {node: '>=12'} + dev: true + /pathe@1.1.1: resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==} dev: true @@ -8845,6 +9196,24 @@ packages: engines: {node: '>=14'} dev: true + /size-limit@11.0.2: + resolution: {integrity: sha512-iFZ8iTR/3zPqxSwEIdGnTVYVU0F2nhodLQG/G6zpi/NxECYAK9ntq2lNr+prXH7h3gyBjx2Umt2D/oS2Qzz+eg==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + dependencies: + bytes-iec: 3.1.1 + chokidar: 3.5.3 + globby: 14.0.1 + lilconfig: 3.1.1 + nanospinner: 1.1.0 + picocolors: 1.0.0 + dev: true + + /slash@5.1.0: + resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==} + engines: {node: '>=14.16'} + dev: true + /smob@1.4.1: resolution: {integrity: sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ==} dev: true @@ -9570,6 +9939,11 @@ packages: engines: {node: '>=4'} dev: true + /unicorn-magic@0.1.0: + resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==} + engines: {node: '>=18'} + dev: true + /unique-string@2.0.0: resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==} engines: {node: '>=8'}