diff --git a/docs/api/core/table.md b/docs/api/core/table.md index ebac5a5c6b..b8b4751a8d 100644 --- a/docs/api/core/table.md +++ b/docs/api/core/table.md @@ -61,7 +61,7 @@ initialState?: Partial< > ``` -Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state. +Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (e.g. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state. > 🧠 Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable. @@ -227,7 +227,7 @@ getRowId?: ( ) => string ``` -This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc. +This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index e.g. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity e.g. a userId, taskId, database ID field, etc. ## Table API diff --git a/docs/api/features/column-filtering.md b/docs/api/features/column-filtering.md index b32d4f314c..bb3517ec1f 100644 --- a/docs/api/features/column-filtering.md +++ b/docs/api/features/column-filtering.md @@ -99,7 +99,7 @@ This optional "hanging" method on any given `filterFn` allows the filter functio ### `filterFn.autoRemove` -This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. eg. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`. +This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. e.g. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`. #### Using Filter Functions @@ -169,7 +169,7 @@ The filter function to use with this column. Options: -- A `string` referencing a [built-in filter function](#filter-functions)) +- A `string` referencing a [built-in filter function](#filter-functions) - A [custom filter function](#filter-functions) ### `enableColumnFilter` diff --git a/docs/api/features/column-sizing.md b/docs/api/features/column-sizing.md index 0bf7631be8..1e8885ec9c 100644 --- a/docs/api/features/column-sizing.md +++ b/docs/api/features/column-sizing.md @@ -152,7 +152,7 @@ The dragging and release events are automatically handled for you. enableColumnResizing?: boolean ``` -Enables/disables column resizing for \*all columns\*\*. +Enables/disables column resizing for **all columns**. ### `columnResizeMode` diff --git a/docs/api/features/global-filtering.md b/docs/api/features/global-filtering.md index 75271f731f..032d99d3eb 100644 --- a/docs/api/features/global-filtering.md +++ b/docs/api/features/global-filtering.md @@ -211,7 +211,7 @@ The filter function to use for global filtering. Options: -- A `string` referencing a [built-in filter function](#filter-functions)) +- A `string` referencing a [built-in filter function](#filter-functions) - A `string` that references a custom filter functions provided via the `tableOptions.filterFns` option - A [custom filter function](#filter-functions) diff --git a/docs/api/features/grouping.md b/docs/api/features/grouping.md index b9c21631fc..201f7ec402 100644 --- a/docs/api/features/grouping.md +++ b/docs/api/features/grouping.md @@ -84,7 +84,7 @@ The aggregation function to use with this column. Options: -- A `string` referencing a [built-in aggregation function](#aggregation-functions)) +- A `string` referencing a [built-in aggregation function](#aggregation-functions) - A [custom aggregation function](#aggregation-functions) ### `aggregatedCell` diff --git a/docs/api/features/pagination.md b/docs/api/features/pagination.md index 5e80d5a7a2..710f06e037 100644 --- a/docs/api/features/pagination.md +++ b/docs/api/features/pagination.md @@ -54,7 +54,7 @@ When manually controlling pagination, you can supply a total `rowCount` value to autoResetPageIndex?: boolean ``` -If set to `true`, pagination will be reset to the first page when page-altering state changes eg. `data` is updated, filters change, grouping changes, etc. +If set to `true`, pagination will be reset to the first page when page-altering state changes e.g. `data` is updated, filters change, grouping changes, etc. > 🧠 Note: This option defaults to `false` if `manualPagination` is set to `true` diff --git a/docs/api/features/sorting.md b/docs/api/features/sorting.md index e5b60eea50..984a407402 100644 --- a/docs/api/features/sorting.md +++ b/docs/api/features/sorting.md @@ -85,7 +85,7 @@ The sorting function to use with this column. Options: -- A `string` referencing a [built-in sorting function](#sorting-functions)) +- A `string` referencing a [built-in sorting function](#sorting-functions) - A [custom sorting function](#sorting-functions) ### `sortDescFirst` @@ -118,7 +118,7 @@ Enables/Disables multi-sorting for this column. invertSorting?: boolean ``` -Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, eg. a ranking (1st, 2nd, 3rd) or golf-like scoring +Inverts the order of the sorting for this column. This is useful for values that have an inverted best/worst scale where lower numbers are better, e.g. a ranking (1st, 2nd, 3rd) or golf-like scoring ### `sortUndefined` diff --git a/docs/enterprise/ag-grid.md b/docs/enterprise/ag-grid.md index 6836b9af11..fdde709250 100644 --- a/docs/enterprise/ag-grid.md +++ b/docs/enterprise/ag-grid.md @@ -8,7 +8,7 @@ title: AG Grid - An alternative enterprise data-grid solution

-While we clearly love TanStack Table, we acknowledge that it is not a "batteries" included product packed with customer support and enterprise polish. We realize that some of our users may need this though! To help out here, we want to introduce you to AG Grid, an enterprise-grade data grid solution that can supercharge your applications with its extensive feature set and robust performance. While TanStack Table is also a powerful option for implementing data grids, we believe in providing our users with a diverse range of choices that best fit their specific requirements. AG Grid is one such choice, and we're excited to highlight its capabilities for you. +While we clearly love TanStack Table, we acknowledge that it is not a "batteries included" product packed with customer support and enterprise polish. We realize that some of our users may need this though! To help out here, we want to introduce you to AG Grid, an enterprise-grade data grid solution that can supercharge your applications with its extensive feature set and robust performance. While TanStack Table is also a powerful option for implementing data grids, we believe in providing our users with a diverse range of choices that best fit their specific requirements. AG Grid is one such choice, and we're excited to highlight its capabilities for you. ## Why Choose [AG Grid](https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable)? diff --git a/docs/framework/qwik/guide/table-state.md b/docs/framework/qwik/guide/table-state.md index fcc42631c2..575257f491 100644 --- a/docs/framework/qwik/guide/table-state.md +++ b/docs/framework/qwik/guide/table-state.md @@ -112,7 +112,7 @@ const table = useQwikTable({ }) -const sate = Qwik.useSignal({ +const state = Qwik.useSignal({ ...table.initialState, //populate the initial state with all of the default state values from the table instance pagination: { pageIndex: 0, diff --git a/docs/framework/react/guide/table-state.md b/docs/framework/react/guide/table-state.md index 09d57566a0..47d1564b2f 100644 --- a/docs/framework/react/guide/table-state.md +++ b/docs/framework/react/guide/table-state.md @@ -168,7 +168,7 @@ const table = useReactTable({ state: { pagination, sorting, - } + }, //syntax 1 onPaginationChange: (updater) => { setPagination(old => { diff --git a/docs/framework/solid/guide/table-state.md b/docs/framework/solid/guide/table-state.md index f5d2f1a62c..38e6c674e0 100644 --- a/docs/framework/solid/guide/table-state.md +++ b/docs/framework/solid/guide/table-state.md @@ -185,7 +185,7 @@ const table = createSolidTable({ get sorting() { return sorting() }, - } + }, //syntax 1 onPaginationChange: (updater) => { setPagination(old => { diff --git a/docs/framework/vue/guide/table-state.md b/docs/framework/vue/guide/table-state.md index aab44cd4fc..1259e5e555 100644 --- a/docs/framework/vue/guide/table-state.md +++ b/docs/framework/vue/guide/table-state.md @@ -114,7 +114,7 @@ const sorting = ref([{ id: 'age', desc: true, //sort by age in descending order by default }]) -const pagination = ref({ pageIndex: 0, pageSize: 15 } +const pagination = ref({ pageIndex: 0, pageSize: 15 }) //Use our controlled state values to fetch data const tableQuery = useQuery({ diff --git a/docs/guide/column-defs.md b/docs/guide/column-defs.md index 07daad7c05..923392c5f9 100644 --- a/docs/guide/column-defs.md +++ b/docs/guide/column-defs.md @@ -13,7 +13,7 @@ Column defs are the single most important part of building a table. They are res - Building the underlying data model that will be used for everything including sorting, filtering, grouping, etc. - Formatting the data model into what will be displayed in the table - Creating [header groups](../api/core/header-group.md), [headers](../api/core/header.md) and [footers](../api/core/column-def.md#footer) -- Creating columns for display-only purposes, eg. action buttons, checkboxes, expanders, sparklines, etc. +- Creating columns for display-only purposes, e.g. action buttons, checkboxes, expanders, sparklines, etc. ## Column Def Types @@ -22,7 +22,7 @@ The following "types" of column defs aren't actually TypeScript types, but more - `Accessor Columns` - Accessor columns have an underlying data model which means they can be sorted, filtered, grouped, etc. - `Display Columns` - - Display columns do **not** have a data model which means they cannot be sorted, filtered, etc, but they can be used to display arbitrary content in the table, eg. a row actions button, checkbox, expander, etc. + - Display columns do **not** have a data model which means they cannot be sorted, filtered, etc, but they can be used to display arbitrary content in the table, e.g. a row actions button, checkbox, expander, etc. - `Grouping Columns` - Group columns do **not** have a data model so they too cannot be sorted, filtered, etc, and are used to group other columns together. It's common to define a header or footer for a column group. @@ -211,7 +211,7 @@ Columns are uniquely identified with 3 strategies: ## Column Formatting & Rendering -By default, columns cells will display their data model value as a string. You can override this behavior by providing custom rendering implementations. Each implementation is provided relevant information about the cell, header or footer and returns something your framework adapter can render eg. JSX/Components/strings/etc. This will depend on which adapter you are using. +By default, columns cells will display their data model value as a string. You can override this behavior by providing custom rendering implementations. Each implementation is provided relevant information about the cell, header or footer and returns something your framework adapter can render e.g. JSX/Components/strings/etc. This will depend on which adapter you are using. There are a couple of formatters available to you: diff --git a/docs/guide/column-filtering.md b/docs/guide/column-filtering.md index 0d9d7e2087..b7fa3c197c 100644 --- a/docs/guide/column-filtering.md +++ b/docs/guide/column-filtering.md @@ -230,7 +230,7 @@ You can attach a few other properties to filter functions to customize their beh - `filterFn.resolveFilterValue` - This optional "hanging" method on any given `filterFn` allows the filter function to transform/sanitize/format the filter value before it is passed to the filter function. -- `filterFn.autoRemove` - This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. eg. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`. +- `filterFn.autoRemove` - This optional "hanging" method on any given `filterFn` is passed a filter value and expected to return `true` if the filter value should be removed from the filter state. e.g. Some boolean-style filters may want to remove the filter value from the table state if the filter value is set to `false`. ```tsx const startsWithFilterFn = ( diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md index 1e511841d5..6bb7f64ccb 100644 --- a/docs/guide/column-ordering.md +++ b/docs/guide/column-ordering.md @@ -91,7 +91,7 @@ const reorderColumn = ( }; const handleDragEnd = (e: DragEvent) => { - if(!movingColumnId || !targetColumnId) return; + if (!movingColumnId || !targetColumnId) return; setColumnOrder(reorderColumn(movingColumnId, targetColumnId)); }; @@ -100,7 +100,7 @@ const handleDragEnd = (e: DragEvent) => { #### 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: +There are undoubtedly many ways to implement drag and drop features alongside 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. diff --git a/docs/guide/column-pinning.md b/docs/guide/column-pinning.md index 9a2f5a4a95..f1b798d0e3 100644 --- a/docs/guide/column-pinning.md +++ b/docs/guide/column-pinning.md @@ -9,8 +9,9 @@ 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) - ### Other Examples - +### Other Examples + + - [Svelte column-pinning](../framework/svelte/examples/column-pinning) - [Vue column-pinning](../framework/vue/examples/column-pinning) @@ -55,7 +56,7 @@ const table = useReactTable({ ### 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 +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({ diff --git a/docs/guide/column-sizing.md b/docs/guide/column-sizing.md index 4c35ffbab8..a8980c413d 100644 --- a/docs/guide/column-sizing.md +++ b/docs/guide/column-sizing.md @@ -15,7 +15,7 @@ Want to skip to the implementation? Check out these examples: ## Column Sizing Guide -The column sizing feature allows you to optionally specify the width of each column including min and max widths. It also allows you and your users the ability to dynamically change the width of all columns at will, eg. by dragging the column headers. +The column sizing feature allows you to optionally specify the width of each column including min and max widths. It also allows you and your users the ability to dynamically change the width of all columns at will, e.g. by dragging the column headers. ### Column Widths diff --git a/docs/guide/columns.md b/docs/guide/columns.md index a40d2edb2a..f6bac2e1ee 100644 --- a/docs/guide/columns.md +++ b/docs/guide/columns.md @@ -18,7 +18,7 @@ You can find the `column` objects in many places. They are often attached #### Header and Cell Objects -Before you reach for one of the `table` instance APIs, consider if you actually need to retrieve either [headers](../guide/headers) or [cells](../guide/cells) instead of `columns`. If you are rending out the markup for your table, you will most likely want to reach for the APIs that return headers or cells instead of columns. The column objects themselves are not really meant to render out the headers or cells, but the `header` and `cell` objects will contain references to these `column` objects from which they can derive the necessary information to render their UI. +Before you reach for one of the `table` instance APIs, consider if you actually need to retrieve either [headers](../guide/headers) or [cells](../guide/cells) instead of `columns`. If you are rendering out the markup for your table, you will most likely want to reach for the APIs that return headers or cells instead of columns. The column objects themselves are not really meant to render out the headers or cells, but the `header` and `cell` objects will contain references to these `column` objects from which they can derive the necessary information to render their UI. ```js const column = cell.column; // get column from cell diff --git a/docs/guide/custom-features.md b/docs/guide/custom-features.md index 5eaa8bdf78..bf52c8d8be 100644 --- a/docs/guide/custom-features.md +++ b/docs/guide/custom-features.md @@ -282,4 +282,4 @@ return( #### Do We Have to Do It This Way? -This is just a new way to integrate custom code along-side the built-in features in TanStack Table. In our example up above, we could have just as easily stored the `density` state in a `React.useState`, defined our own `toggleDensity` handler wherever, and just used it in our code separately from the table instance. Building table features along-side TanStack Table instead of deeply integrating them into the table instance is still a perfectly valid way to build custom features. Depending on your use case, this may or may not be the cleanest way to extend TanStack Table with custom features. +This is just a new way to integrate custom code alongside the built-in features in TanStack Table. In our example up above, we could have just as easily stored the `density` state in a `React.useState`, defined our own `toggleDensity` handler wherever, and just used it in our code separately from the table instance. Building table features alongside TanStack Table instead of deeply integrating them into the table instance is still a perfectly valid way to build custom features. Depending on your use case, this may or may not be the cleanest way to extend TanStack Table with custom features. diff --git a/docs/guide/expanding.md b/docs/guide/expanding.md index 6088251ec9..c26e2871ba 100644 --- a/docs/guide/expanding.md +++ b/docs/guide/expanding.md @@ -52,7 +52,7 @@ type Person = { children?: Person[] | undefined } -const data: Person[] = [ +const data: Person[] = [ { id: 1, name: 'John', age: 30, diff --git a/docs/guide/global-filtering.md b/docs/guide/global-filtering.md index c4e7fb437b..d45fd3bf6c 100644 --- a/docs/guide/global-filtering.md +++ b/docs/guide/global-filtering.md @@ -164,7 +164,7 @@ const table = useReactTable({ // other options... initialState: { globalFilter: 'search term', // if not managing globalFilter state, set initial state here - } + }, state: { globalFilter, // pass our managed globalFilter state to the table } diff --git a/docs/guide/grouping.md b/docs/guide/grouping.md index 9c8ee4b278..0c5600089b 100644 --- a/docs/guide/grouping.md +++ b/docs/guide/grouping.md @@ -37,7 +37,7 @@ When grouping state is active, the table will add matching rows as subRows to th To allow the user to expand and collapse the grouped rows, you can use the expanding feature. ```tsx -import { getGroupedRowModel, getExpandedRowModel} from '@tanstack/react-table' +import { getGroupedRowModel, getExpandedRowModel } from '@tanstack/react-table' const table = useReactTable({ // other options... diff --git a/docs/guide/pinning.md b/docs/guide/pinning.md index 3d33e44ebb..43c67e5417 100644 --- a/docs/guide/pinning.md +++ b/docs/guide/pinning.md @@ -2,7 +2,7 @@ title: Pinning Guide --- - + Pinning is split into 2 different feature guides: diff --git a/docs/guide/sorting.md b/docs/guide/sorting.md index 13e756dfb8..7901268e8a 100644 --- a/docs/guide/sorting.md +++ b/docs/guide/sorting.md @@ -267,7 +267,7 @@ const table = useReactTable({ #### Invert Sorting -Inverting sorting is not the same as changing the default sorting direction. If `invertSorting` column option is `true` for a column, then the "desc/asc" sorting states will still cycle like normal, but the actual sorting of the rows will be inverted. This is useful for values that have an inverted best/worst scale where lower numbers are better, eg. a ranking (1st, 2nd, 3rd) or golf-like scoring. +Inverting sorting is not the same as changing the default sorting direction. If `invertSorting` column option is `true` for a column, then the "desc/asc" sorting states will still cycle like normal, but the actual sorting of the rows will be inverted. This is useful for values that have an inverted best/worst scale where lower numbers are better, e.g. a ranking (1st, 2nd, 3rd) or golf-like scoring. ```jsx const columns = [ diff --git a/docs/guide/tables.md b/docs/guide/tables.md index 781ae37c6c..cf67ad1ef9 100644 --- a/docs/guide/tables.md +++ b/docs/guide/tables.md @@ -71,7 +71,7 @@ const data = ref([]) #### Defining Columns -Column definitions are covered in detail in the next section in the [Column Def Guide](./column-defs.md). We'll note here, however, that when you define the type of your columns, you should use the same `TData` type that you used for you data. +Column definitions are covered in detail in the next section in the [Column Def Guide](./column-defs.md). We'll note here, however, that when you define the type of your columns, you should use the same `TData` type that you used for your data. ```ts const columns: ColumnDef[] = [] //Pass User type as the generic TData type diff --git a/docs/installation.md b/docs/installation.md index 27c2e9a5ea..33bab807bd 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -16,7 +16,7 @@ npm install @tanstack/react-table The `@tanstack/react-table` package works with React 16.8, React 17, React 18, and React 19. -> NOTE: Even though the react adapter works with React 19, it may not work with the new React Compiler that's coming out along-side React 19. This may be fixed in future TanStack Table updates. +> NOTE: Even though the React adapter works with React 19, it may not work with the new React Compiler that's coming out alongside React 19. This may be fixed in future TanStack Table updates. ## Vue Table @@ -32,7 +32,7 @@ The `@tanstack/vue-table` package works with Vue 3. npm install @tanstack/solid-table ``` -The `@tanstack/solid-table` package works with Solid-JS 1 +The `@tanstack/solid-table` package works with Solid-JS 1. ## Svelte Table diff --git a/docs/introduction.md b/docs/introduction.md index 5b320f57e7..a1ce0387b3 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -10,7 +10,7 @@ TanStack Table is a **Headless UI** library for building powerful tables & datag The hardest parts of building complex UIs usually revolve around state, events, side-effects, data computation/management. By removing these concerns from the markup, styles and implementation details, our logic and components can be more modular and reusable. -Building UI is a very branded and custom experience, even if that means choosing a design system or adhering to a design spec. To support this custom experience, component-based UI libraries need to support a massive (and seemingly endless) API surface around markup and style customization. Headless UI libraries decouple your logic from your UI +Building UI is a very branded and custom experience, even if that means choosing a design system or adhering to a design spec. To support this custom experience, component-based UI libraries need to support a massive (and seemingly endless) API surface around markup and style customization. Headless UI libraries decouple your logic from your UI. When you use a headless UI library, the complex task of **data-processing, state-management, and business logic** are handled for you, leaving you to worry about higher-cardinality decisions that differ across implementations and use cases.