diff --git a/README.md b/README.md index 6a9e964869..cd513ff183 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,8 @@ -![React Table Header](https://github.com/tannerlinsley/react-table/raw/master/media/repo-dark.png) +# React Table v7 -Hooks for building **lightweight, fast and extendable datagrids** for React +> [Looking for the latest version?](https://github.com/tanstack/react-table) - - #TanStack - - - - - - - - semantic-release - - Join the discussion on Github - - - - - - -Enjoy this library? Try them all! [React Query](https://github.com/tannerlinsley/react-query), [React Form](https://github.com/tannerlinsley/react-form), [React Charts](https://github.com/tannerlinsley/react-charts) - -## Visit [react-table.tanstack.com](https://react-table.tanstack.com) for docs, guides, API and more! +## Visit [react-table-v7.tanstack.com](https://react-table-v7.tanstack.com) for docs, guides, API and more! ## Quick Features @@ -43,18 +23,4 @@ Enjoy this library? Try them all! [React Query](https://github.com/tannerlinsley ### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/) -## Previous Versions - -### Version 6 - -v6 is a great library and while it is still available to install and use, I am no longer offering any long-term support for it. If you intend to keep using v6, I recommend maintaining your own fork of the library and keeping it up to date for your version of React. - -#### Where are the docs for the older v6 version? - -Please [visit the v6 branch](https://github.com/tannerlinsley/react-table/tree/v6) - -#### I want to migrate from v6 to v7. How do I do that? - -The differences between the 2 versions are incredibly massive. Unfortunately, I cannot write a one-to-one upgrade guide for any of v6's API, simply because much of it is irrelevant with v7's headless approach. The best approach for migrating to v7 is to learn its API by reading the documentation and then following some of the examples to begin building your own table component. - -In case you would need to have both v6 and v7 in one app during the migration process (large codebase, complex use cases), you can either (1) fork and maintain your own local version of React Table v6 or (2) install the [`react-table-6` alias package](https://www.npmjs.com/package/react-table-6) for use alongside the `react-table` package. + diff --git a/docs/public/images/bytes-logo.png b/docs/public/images/bytes-logo.png new file mode 100644 index 0000000000..26ca9143ce Binary files /dev/null and b/docs/public/images/bytes-logo.png differ diff --git a/docs/src/components/BytesForm.js b/docs/src/components/BytesForm.js new file mode 100644 index 0000000000..168fcf975f --- /dev/null +++ b/docs/src/components/BytesForm.js @@ -0,0 +1,49 @@ +import React from 'react' +import useBytesSubmit from './useBytesSubmit' + +export default function BytesForm() { + const { state, handleSubmit, error } = useBytesSubmit() + if (state === 'submitted') { + return ( +

Success! Please, check your email to confirm your subscription.

+ ) + } + return ( +
+
+
+ Bytes +
+ + +
+

+ No spam. Unsubscribe at any time. +

+ {error &&

{error}

} +
+ ) +} diff --git a/docs/src/components/Footer.js b/docs/src/components/Footer.js index 53865e7bf3..c914b8d79f 100644 --- a/docs/src/components/Footer.js +++ b/docs/src/components/Footer.js @@ -1,6 +1,7 @@ import * as React from 'react' import Link from 'next/link' import CarbonAds from './CarbonAds' +import BytesForm from './BytesForm' export const Footer = props => { return ( @@ -92,56 +93,13 @@ export const Footer = props => {

- Subscribe to our newsletter + Subscribe to Bytes

- The latest TanStack news, articles, and resources, sent to your - inbox. + The best JavaScript newsletter! Delivered every Monday to over + 76,000 devs.

-
-
diff --git a/docs/src/components/LayoutDocs.js b/docs/src/components/LayoutDocs.js index 3b0f6f18d1..34ac5ccdea 100644 --- a/docs/src/components/LayoutDocs.js +++ b/docs/src/components/LayoutDocs.js @@ -20,6 +20,7 @@ import { Seo } from './Seo' import MDXComponents from './MDXComponents' import Head from 'next/head' import { getManifest } from 'manifests/getManifest' +import BytesForm from './BytesForm' const getSlugAndTag = path => { const parts = path.split('/') @@ -113,6 +114,16 @@ export const LayoutDocs = props => {
+
+

+ Subscribe to Bytes +

+

+ The best JavaScript newsletter! Delivered every + Monday to over 76,000 devs. +

+ +
)} diff --git a/docs/src/components/useBytesSubmit.js b/docs/src/components/useBytesSubmit.js new file mode 100644 index 0000000000..954dff7468 --- /dev/null +++ b/docs/src/components/useBytesSubmit.js @@ -0,0 +1,32 @@ +import { useState } from 'react'; + +function sendBytesOptIn({ email, influencer, source, referral }) { + return fetch(`https://bytes.dev/api/bytes-optin-cors`, { + method: 'POST', + body: JSON.stringify({ email, influencer, source, referral }), + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + }).then((res) => res.json()) +} + +export default function useBytesSubmit() { + const [state, setState] = useState("initial"); + const [error, setError] = useState(null); + + const handleSubmit = (e) => { + e.preventDefault(); + const email = e.target.email_address.value; + setState("loading"); + sendBytesOptIn({ email, influencer: "tanstack" }) + .then(() => { + setState("submitted"); + }) + .catch((err) => { + setError(err); + }); + }; + + return { handleSubmit, state, error }; +} \ No newline at end of file diff --git a/docs/src/pages/docs/api/overview.md b/docs/src/pages/docs/api/overview.md index 5436aeb38b..4259cfb593 100644 --- a/docs/src/pages/docs/api/overview.md +++ b/docs/src/pages/docs/api/overview.md @@ -28,6 +28,7 @@ React Table is essentially a compatible collection of **custom React hooks**: - `useBlockLayout` - `useAbsoluteLayout` - `useFlexLayout` + - `useGridLayout` - 3rd Party Plugin Hooks - [LineUp-lite Hooks](https://lineup-lite.netlify.app) - Core Plugin Hooks diff --git a/docs/src/pages/docs/api/useAbsoluteLayout.md b/docs/src/pages/docs/api/useAbsoluteLayout.md index f9788afb22..4e9d18deaf 100644 --- a/docs/src/pages/docs/api/useAbsoluteLayout.md +++ b/docs/src/pages/docs/api/useAbsoluteLayout.md @@ -51,5 +51,5 @@ ### Example -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/absolute-layout) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/absolute-layout) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/absolute-layout) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/absolute-layout) diff --git a/docs/src/pages/docs/api/useBlockLayout.md b/docs/src/pages/docs/api/useBlockLayout.md index 3cf05daa67..416cce08e6 100644 --- a/docs/src/pages/docs/api/useBlockLayout.md +++ b/docs/src/pages/docs/api/useBlockLayout.md @@ -45,5 +45,5 @@ ### Example -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/block-layout) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/block-layout) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/block-layout) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/block-layout) diff --git a/docs/src/pages/docs/api/useColumnOrder.md b/docs/src/pages/docs/api/useColumnOrder.md index d58576af14..29c3e97612 100644 --- a/docs/src/pages/docs/api/useColumnOrder.md +++ b/docs/src/pages/docs/api/useColumnOrder.md @@ -23,5 +23,5 @@ The following values are provided to the table `instance`: - Use this function to programmatically update the columnOrder. - `updater` can be a function or value. If a `function` is passed, it will receive the current value and expect a new one to be returned. -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-ordering) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-ordering) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/column-ordering) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/column-ordering) diff --git a/docs/src/pages/docs/api/useExpanded.md b/docs/src/pages/docs/api/useExpanded.md index feb0a19ba1..fa2e2e7810 100644 --- a/docs/src/pages/docs/api/useExpanded.md +++ b/docs/src/pages/docs/api/useExpanded.md @@ -61,5 +61,5 @@ The following additional properties are available on every `row` object returned ### Example -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/expanding) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/expanding) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/expanding) diff --git a/docs/src/pages/docs/api/useFilters.md b/docs/src/pages/docs/api/useFilters.md index 54ed7ce2e4..718dd222f1 100644 --- a/docs/src/pages/docs/api/useFilters.md +++ b/docs/src/pages/docs/api/useFilters.md @@ -94,5 +94,5 @@ The following properties are available on every `Column` object returned by the ### Example -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/filtering) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/filtering) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/filtering) diff --git a/docs/src/pages/docs/api/useFlexLayout.md b/docs/src/pages/docs/api/useFlexLayout.md index 296b25d6dd..351efc0607 100644 --- a/docs/src/pages/docs/api/useFlexLayout.md +++ b/docs/src/pages/docs/api/useFlexLayout.md @@ -51,5 +51,5 @@ ### Example (Full Width Resizable Table) -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/full-width-resizable-table) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/full-width-resizable-table) diff --git a/docs/src/pages/docs/api/useGlobalFilter.md b/docs/src/pages/docs/api/useGlobalFilter.md index 98140c082e..a8ab43d995 100644 --- a/docs/src/pages/docs/api/useGlobalFilter.md +++ b/docs/src/pages/docs/api/useGlobalFilter.md @@ -60,5 +60,5 @@ The following values are provided to the table `instance`: ### Example -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/filtering) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/filtering) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/filtering) diff --git a/docs/src/pages/docs/api/useGridLayout.md b/docs/src/pages/docs/api/useGridLayout.md index 2b50064db0..8d3bb14e92 100644 --- a/docs/src/pages/docs/api/useGridLayout.md +++ b/docs/src/pages/docs/api/useGridLayout.md @@ -9,4 +9,15 @@ - `getTableProps` - **Usage Required** - - This core prop getter is required to get the correct stying for the layout \ No newline at end of file + - This core prop getter is required to get the correct stying for the layout + +### Row Properties + +- `getRowProps` + - This core prop getter is required for rendering sub-components as a full row + +### Header Properties + +- `getHeaderProps` + - **Usage Required** + - This core prop getter is required to to enable absolute layout for headers diff --git a/docs/src/pages/docs/api/useGroupBy.md b/docs/src/pages/docs/api/useGroupBy.md index 6969234bc4..5ee1ba0030 100644 --- a/docs/src/pages/docs/api/useGroupBy.md +++ b/docs/src/pages/docs/api/useGroupBy.md @@ -27,6 +27,12 @@ The following options are supported via the main options object passed to `useTa - Must be **memoized** - Defaults to `defaultGroupByFn` - This function is responsible for grouping rows based on the `state.groupBy` keys provided. It's very rare you would need to customize this function. +- `autoResetGroupBy: Boolean` + - Defaults to `true` + - When `true`, the `expanded` state will automatically reset if any of the following conditions are met: + - `data` is changed + - To disable, set to `false` + - For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](../faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes) ### Column Options @@ -126,5 +132,5 @@ The following additional properties are available on every `Cell` object returne ### Example -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/grouping) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/grouping) diff --git a/docs/src/pages/docs/api/usePagination.md b/docs/src/pages/docs/api/usePagination.md index dd1d9b54ae..f92491b52f 100644 --- a/docs/src/pages/docs/api/usePagination.md +++ b/docs/src/pages/docs/api/usePagination.md @@ -22,7 +22,7 @@ The following options are supported via the main options object passed to `useTa - `pageCount: Int` - **Required if `manualPagination` is set to `true`** - If `manualPagination` is `true`, then this value used to determine the amount of pages available. This amount is then used to materialize the `pageOptions` and also compute the `canNextPage` values on the table instance. - - Set to `-1` if you don't know or don't want to present the number of pages available. `canNextPage` will return `false` if page data length is less than pageSize, otherwise `true`. + - Set to `-1` if you don't know or don't want to present the number of pages available. `canNextPage` will return `false` if page data length is less than pageSize, otherwise `true`. - `manualPagination: Bool` - Enables pagination functionality, but does not automatically perform row pagination. - Turn this on if you wish to implement your own pagination outside of the table (eg. server-side pagination or any other manual pagination technique) @@ -79,8 +79,8 @@ The following values are provided to the table `instance`: ### Example - Basic Pagination - - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination) - - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination) + - [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/pagination) + - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/pagination) - Controlled Pagination - - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination-controlled) - - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled) + - [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/pagination-controlled) + - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/pagination-controlled) diff --git a/docs/src/pages/docs/api/useResizeColumns.md b/docs/src/pages/docs/api/useResizeColumns.md index adc3a77a9e..d6b935442d 100644 --- a/docs/src/pages/docs/api/useResizeColumns.md +++ b/docs/src/pages/docs/api/useResizeColumns.md @@ -31,5 +31,5 @@ The core column options `width`, `minWidth` and `maxWidth` are used to calculate ### Example -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-resizing) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-resizing) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/column-resizing) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/column-resizing) diff --git a/docs/src/pages/docs/api/useRowSelect.md b/docs/src/pages/docs/api/useRowSelect.md index c8acd7e9ad..c9fbf4f084 100644 --- a/docs/src/pages/docs/api/useRowSelect.md +++ b/docs/src/pages/docs/api/useRowSelect.md @@ -82,10 +82,10 @@ The following additional properties are available on every **prepared** `row` ob #### Select All Checks All Rows -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/row-selection) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/row-selection) #### Select All Checks Current Page's Rows -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection-and-pagination) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection-and-pagination) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/row-selection-and-pagination) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/row-selection-and-pagination) diff --git a/docs/src/pages/docs/api/useSortBy.md b/docs/src/pages/docs/api/useSortBy.md index 32a7170e1f..6b33957e3e 100644 --- a/docs/src/pages/docs/api/useSortBy.md +++ b/docs/src/pages/docs/api/useSortBy.md @@ -75,11 +75,10 @@ The following options are supported on any `Column` object passed to the `column - `sortType: String | Function(rowA: , rowB: , columnId: String, desc: Bool)` - Used to compare 2 rows of data and order them correctly. - If a **function** is passed, it must be **memoized**. The sortType function should return 1 if rowA is larger, and -1 if rowB is larger. `react-table` will take care of the rest. - - String options: `string`, `number`, `basic`, `datetime`, `alphanumeric`. Defaults to `alphanumeric`. + - String options: `basic`, `datetime`, `alphanumeric`. Defaults to `alphanumeric`. - The resolved function from the this string/function will be used to sort the this column's data. - If a `string` is passed, the function with that name located on either the custom `sortTypes` option or the built-in sorting types object will be used. - If a `function` is passed, it will be used. - - For more information on sort types, see Sorting ### Instance Properties @@ -123,5 +122,5 @@ The following properties are available on every `Column` object returned by the ### Example -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sorting) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/sorting) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/sorting) diff --git a/docs/src/pages/docs/api/useTable.md b/docs/src/pages/docs/api/useTable.md index a3c5eefdad..f0fab2482f 100644 --- a/docs/src/pages/docs/api/useTable.md +++ b/docs/src/pages/docs/api/useTable.md @@ -291,5 +291,5 @@ The following additional properties are available on every `Cell` object returne ### Example -- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/basic) -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic) +- [Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/basic) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/basic) diff --git a/docs/src/pages/docs/examples/animated-framer-motion.md b/docs/src/pages/docs/examples/animated-framer-motion.md index e6d06b7249..241f330bac 100644 --- a/docs/src/pages/docs/examples/animated-framer-motion.md +++ b/docs/src/pages/docs/examples/animated-framer-motion.md @@ -4,11 +4,11 @@ title: Animated Columns (Framer-Motion) toc: false --- -- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion) -- [View Source](https://github.com/tannerlinsley/react-table/tree/master/examples/animated-framer-motion) +- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/animated-framer-motion) +- [View Source](https://github.com/tannerlinsley/react-table/tree/v7/examples/animated-framer-motion)