mirror of
https://github.com/gosticks/react-table.git
synced 2026-08-11 20:40:17 +00:00
New documentation site built with Docz (#2013)
* size-snapshot created? * Added docz for documentation site * Modified .gitignore to get rid of .docz internal stuff * Update all doc links to point to proper paths with docz * Removed .docz folder from Git Co-authored-by: Jason Clark <jason.clark@tcnbroadcasting.com>
This commit is contained in:
Jason Clark
co-authored by
Jason Clark
Jason Clark
parent
d0a9b97ed0
commit
d2acfc4235
@@ -13,3 +13,7 @@ react-table.css
|
||||
.vscode
|
||||
package-lock.json
|
||||
coverage
|
||||
.docz/.cache
|
||||
.docz/app
|
||||
.docz/node_modules
|
||||
.docz/public
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: Changelog
|
||||
route: /changelog
|
||||
---
|
||||
# React Table Changelog
|
||||
|
||||
## 7.0.0 🎉
|
||||
|
||||
- Fixed an issue where page options array could be empty
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
---
|
||||
name: Code of Conduct
|
||||
route: /code-of-conduct
|
||||
---
|
||||
|
||||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
+6
-1
@@ -1,3 +1,8 @@
|
||||
---
|
||||
name: Contributing
|
||||
route: /contributing
|
||||
---
|
||||
|
||||
# Contributing
|
||||
|
||||
## Questions
|
||||
@@ -23,6 +28,6 @@ If you have been assigned to fix an issue or develop a new feature, please follo
|
||||
- Implement your changes and tests to files in the `src/` directory and corresponding test files
|
||||
- To run examples, follow their individual directions. Usually this is just `$ yarn && yarn start`.
|
||||
- To run examples using your local build, link to the local `react-table` by running `$ yarn link react-table` from the example's directory
|
||||
- Document your changes in the root `README.md`
|
||||
- Document your changes in the appropriate doc page
|
||||
- To stage a commit, run `yarn commit`
|
||||
- Submit PR for review
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
---
|
||||
name: Getting Started
|
||||
route: /
|
||||
---
|
||||
|
||||
|
||||
|
||||
<img src='https://github.com/tannerlinsley/react-table/raw/master/media/logo.png' width='300'/>
|
||||
@@ -5,7 +10,7 @@
|
||||
Hooks for building **lightweight, fast and extendable datagrids** for React
|
||||
|
||||
<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
|
||||
<img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
|
||||
<img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack" />
|
||||
</a><a href="https://github.com/tannerlinsley/react-table/actions?table=workflow%3A%22react-table+tests%22">
|
||||
<img src="https://github.com/tannerlinsley/react-table/workflows/react-table%20tests/badge.svg" />
|
||||
</a><a href="https://npmjs.com/package/react-table" target="\_parent">
|
||||
@@ -43,14 +48,7 @@ Enjoy this library? Try them all! [React Query](https://github.com/tannerlinsley
|
||||
|
||||
## Documentation
|
||||
|
||||
- [Installation](./docs/installation.md) - Walk through how to install React Table
|
||||
- [Concepts](./docs/concepts.md) - Read how React Table works and how you can use it better
|
||||
- [Examples](./docs/examples.md) - Experience and learn from some examples and guides of how to use React Table and implement common patterns
|
||||
- [API](./docs/api/README.md) - Get to know React Table's API
|
||||
- [FAQ](./docs/faq.md) - Learn how to use React Table for specific challenges and tasks
|
||||
- [Previous Versions](#previous-versions)
|
||||
- [Contributing](./CONTRIBUTING.md) - Become familiar with how to contribute back to React Table
|
||||
- [Code of Conduct](./CODE_OF_CONDUCT.md) - Be a good React Table citizen by following these repository rules
|
||||
Visit our new documentation site at https://react-table.tannerlinsley.com
|
||||
|
||||
## Sponsors
|
||||
|
||||
@@ -61,7 +59,7 @@ This library is being built and maintained by me, @tannerlinsley and I am always
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://github.com/sponsors/tannerlinsley" target="_blank">
|
||||
<img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/diamond.png">
|
||||
<img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/diamond.png" />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
@@ -78,12 +76,12 @@ This library is being built and maintained by me, @tannerlinsley and I am always
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://github.com/sponsors/tannerlinsley/" target="_blank">
|
||||
<img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/platinum.png">
|
||||
<img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/platinum.png" />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
|
||||
<img width='300' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-retool.png">
|
||||
<img width='300' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-retool.png" />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
@@ -100,12 +98,12 @@ This library is being built and maintained by me, @tannerlinsley and I am always
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://github.com/sponsors/tannerlinsley/" target="_blank">
|
||||
<img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold.png">
|
||||
<img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold.png" />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://nozzle.io" target="_blank">
|
||||
<img width='225' src="https://nozzle.io/img/logo-blue.png">
|
||||
<img width='225' src="https://nozzle.io/img/logo-blue.png" />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
@@ -122,17 +120,17 @@ This library is being built and maintained by me, @tannerlinsley and I am always
|
||||
<tr>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://github.com/sponsors/tannerlinsley/" target="_blank">
|
||||
<img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver.png">
|
||||
<img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver.png" />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://tripwire.com" target="_blank">
|
||||
<img width='170' src="https://www.tripwire.com/-/media/tripwiredotcom/icons/tripwire-logo-footer.svg">
|
||||
<img width='170' src="https://www.tripwire.com/-/media/tripwiredotcom/icons/tripwire-logo-footer.svg" />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
<a href="https://www.fream.pl/" target="_blank">
|
||||
<img width='170' src="https://www.fream.pl/wp-content/uploads/2017/08/logo.png">
|
||||
<img width='170' src="https://www.fream.pl/wp-content/uploads/2017/08/logo.png" />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle">
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
To get started with React Table, [click here](../README.md), or select a specific document from this directory.
|
||||
+21
-15
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: Overview
|
||||
route: /api
|
||||
menu: API
|
||||
---
|
||||
|
||||
# API
|
||||
|
||||
React Table uses React Hooks both internally and externally for almost all of its configuration and lifecycle management. Naturally, this is what allows React Table to be headless and lightweight while still having a concise and simple API.
|
||||
@@ -5,24 +11,24 @@ React Table uses React Hooks both internally and externally for almost all of it
|
||||
React Table is essentially a compatible collection of **custom React hooks**:
|
||||
|
||||
- The primary React Table hook
|
||||
- [`useTable`](./useTable.md)
|
||||
- [`useTable`](./api/useTable)
|
||||
- Plugin Hooks
|
||||
- Core Plugin Hooks
|
||||
- [`useGroupBy`](./useGroupBy.md)
|
||||
- [`useFilters`](./useFilters.md)
|
||||
- [`useGlobalFilter`](./useGlobalFilter.md)
|
||||
- [`useSortBy`](./useSortBy.md)
|
||||
- [`useExpanded`](./useExpanded.md)
|
||||
- [`usePagination`](./usePagination.md)
|
||||
- [`useTokenPagination` (Coming Soon)](./useTokenPagination.md)
|
||||
- [`useRowSelect`](./useRowSelect.md)
|
||||
- [`useRowState`](./useRowState.md)
|
||||
- [`useColumnOrder`](./useColumnOrder.md)
|
||||
- [`useGroupBy`](./api/useGroupBy)
|
||||
- [`useFilters`](./api/useFilters)
|
||||
- [`useGlobalFilter`](./api/useGlobalFilter)
|
||||
- [`useSortBy`](./api/useSortBy)
|
||||
- [`useExpanded`](./api/useExpanded)
|
||||
- [`usePagination`](./api/usePagination)
|
||||
- [`useTokenPagination` (Coming Soon)](./api/useTokenPagination)
|
||||
- [`useRowSelect`](./api/useRowSelect)
|
||||
- [`useRowState`](./api/useRowState)
|
||||
- [`useColumnOrder`](./api/useColumnOrder)
|
||||
- Layout Hooks
|
||||
- [`useBlockLayout`](./useBlockLayout.md)
|
||||
- [`useAbsoluteLayout`](./useAbsoluteLayout.md)
|
||||
- [`useFlexLayout`](./useFlexLayout.md)
|
||||
- [`useResizeColumns`](./useResizeColumns.md)
|
||||
- [`useBlockLayout`](./api/useBlockLayout)
|
||||
- [`useAbsoluteLayout`](./api/useAbsoluteLayout)
|
||||
- [`useFlexLayout`](./api/useFlexLayout)
|
||||
- [`useResizeColumns`](./api/useResizeColumns)
|
||||
- 3rd Party Plugin Hooks
|
||||
- Want your custom plugin hook listed here? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useAbsoluteLayout
|
||||
route: /api/useAbsoluteLayout
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useAbsoluteLayout`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useBlocklayout
|
||||
route: /api/useBlocklayout
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useBlocklayout`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useColumnOrder
|
||||
route: /api/useColumnOrder
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useColumnOrder`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useExpanded
|
||||
route: /api/useExpanded
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useExpanded`
|
||||
|
||||
- Plugin Hook
|
||||
@@ -33,7 +39,7 @@ The following options are supported via the main options object passed to `useTa
|
||||
- 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.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
|
||||
- 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)
|
||||
|
||||
### Instance Properties
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useFilters
|
||||
route: /api/useFilters
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useFilters`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useFlexLayout
|
||||
route: /api/useFlexLayout
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useFlexLayout`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useGlobalFilter
|
||||
route: /api/useGlobalFilter
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useGlobalFilter`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useGroupBy
|
||||
route: /api/useGroupBy
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useGroupBy`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
---
|
||||
name: usePagination
|
||||
route: /api/usePagination
|
||||
menu: API
|
||||
---
|
||||
# `usePagination`
|
||||
|
||||
- Plugin Hook
|
||||
@@ -34,7 +39,7 @@ The following options are supported via the main options object passed to `useTa
|
||||
- `manualFilters` is `false` and `state.filters` is changed
|
||||
- `manualGroupBy` is `false` and `state.groupBy` 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.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
|
||||
- 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)
|
||||
- `paginateExpandedRows: Bool`
|
||||
- Optional
|
||||
- Only applies when using the `useExpanded` plugin hook simultaneously
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useResizeColumns
|
||||
route: /api/useResizeColumns
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useResizeColumns`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useRowSelect
|
||||
route: /api/useRowSelect
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useRowSelect`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useRowState
|
||||
route: /api/useRowState
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useRowState`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useSortBy
|
||||
route: /api/useSortBy
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useSortBy`
|
||||
|
||||
- Plugin Hook
|
||||
@@ -49,7 +55,7 @@ The following options are supported via the main options object passed to `useTa
|
||||
- When `true`, the `sortBy` 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.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
|
||||
- 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
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useTable
|
||||
route: /api/useTable
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useTable`
|
||||
|
||||
- Required
|
||||
@@ -40,7 +46,7 @@ The following options are supported via the main options object passed to `useTa
|
||||
- If you need to control part of the table state, this is the place to do it.
|
||||
- This function is run on every single render, just like a hook and allows you to alter the final state of the table if necessary.
|
||||
- You can use hooks inside of this function, but most of the time, we just suggest using `React.useMemo` to memoize your state overrides.
|
||||
- See the FAQ ["How can I manually control the table state?"](../faq.md#how-can-i-manually-control-the-table-state) for a an example.
|
||||
- See the FAQ ["How can I manually control the table state?"](/faq#how-can-i-manually-control-the-table-state) for a an example.
|
||||
- `defaultColumn: Object`
|
||||
- Optional
|
||||
- Defaults to `{}`
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
---
|
||||
name: useTokenPagination
|
||||
route: /api/useTokenPagination
|
||||
menu: API
|
||||
---
|
||||
|
||||
# `useTokenPagination (Coming Soon)`
|
||||
|
||||
- Plugin Hook
|
||||
|
||||
+9
-4
@@ -1,3 +1,8 @@
|
||||
---
|
||||
name: Concepts
|
||||
route: /concepts
|
||||
---
|
||||
|
||||
# Concepts
|
||||
|
||||
## React Table is a "headless" UI library
|
||||
@@ -23,11 +28,11 @@ At the heart of every React Table is the `useTable` hook and the table `instance
|
||||
|
||||
## Rendering your own UI
|
||||
|
||||
As of React Table v7, **you the developer** are responsible for rendering your own UI, but don't let that intimidate you! Table UIs are fun and React Table makes it so easy to wire up your own table UI. The easiest way to learn how to build your own table UI is to [see some existing React Table examples](./examples.md)!
|
||||
As of React Table v7, **you the developer** are responsible for rendering your own UI, but don't let that intimidate you! Table UIs are fun and React Table makes it so easy to wire up your own table UI. The easiest way to learn how to build your own table UI is to [see some existing React Table examples](./examples)!
|
||||
|
||||
---
|
||||
|
||||
After reading about React Table's concepts, you should:
|
||||
|
||||
- [Check Out Some Examples](./examples.md)
|
||||
- [Study the API](./api/README.md)
|
||||
- [Follow the Quick Start](./quickstart)
|
||||
- [Check Out Some Examples](./examples)
|
||||
- [Study the API](./api)
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
# Examples
|
||||
|
||||
- **Simple** - All of these examples use automatic state management, meaning, they don't hoist any state out of the table or manually control anything. Start here for understanding the basics about how to build your table UI.
|
||||
- Basic
|
||||
- [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)
|
||||
- Footers
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/footers)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/footers)
|
||||
- Sorting
|
||||
- [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)
|
||||
- Filtering
|
||||
- [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)
|
||||
- Grouping
|
||||
- [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)
|
||||
- Grouping (Single Column)
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping-column)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping-column)
|
||||
- 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)
|
||||
- Row Selection
|
||||
- [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)
|
||||
- Expanding
|
||||
- [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)
|
||||
- Sub Components
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sub-components)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components)
|
||||
- Editable Data
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/editable-data)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data)
|
||||
- Column Ordering
|
||||
- [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)
|
||||
- Column Hiding
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-hiding)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-hiding)
|
||||
- Column Resizing
|
||||
- [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)
|
||||
- Data-Driven Classes and Styles
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/data-driven-classes-and-styles)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/data-driven-classes-and-styles)
|
||||
- Row DnD
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-dnd)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-dnd)
|
||||
- Full Width Table (Table Elements with collapsible content)
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-table)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-table)
|
||||
- Full Width Resizable Table (via `useFlexLayout`)
|
||||
- [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)
|
||||
- **Complex**
|
||||
- The "Kitchen Sink"
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
|
||||
- **Controlled** - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
|
||||
- Pagination (Controlled)
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
|
||||
- [Open in CodeSandobx](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
|
||||
- **UI & Rendering** - These examples demonstrate how to use React Table with your favorite UI libraries or tools!
|
||||
- Virtualized Rows (React-Window)
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
|
||||
- Animated (Framer-Motion)
|
||||
- [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/master/examples/animated-framer-motion)
|
||||
- Material-UI
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-components)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-components)
|
||||
- Material-UI Enhanced Table
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
|
||||
- [ ] Styled-Components
|
||||
- [ ] CSS
|
||||
- [ ] Bootstrap
|
||||
- Want to write one of these examples or add another? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)
|
||||
@@ -0,0 +1,16 @@
|
||||
---
|
||||
name: Examples
|
||||
route: /examples
|
||||
---
|
||||
|
||||
# Examples
|
||||
|
||||
- [**Simple**](./examples/simple) - All of these examples use automatic state management, meaning, they don't hoist any state out of the table or manually control anything. Start here for understanding the basics about how to build your table UI.
|
||||
|
||||
- [**Complex**](./examples/complex) - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
|
||||
|
||||
- [**Controlled**](./examples/controlled) - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
|
||||
|
||||
- [**UI & Rendering**](./examples/ui) - These examples demonstrate how to use React Table with your favorite UI libraries or tools!
|
||||
|
||||
* Want to add another example? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
name: Complex
|
||||
route: /examples/complex
|
||||
menu: Examples
|
||||
---
|
||||
|
||||
# Complex
|
||||
|
||||
These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
|
||||
|
||||
## The "Kitchen Sink"
|
||||
|
||||
This example includes Pagination, Sorting, Filtering, Grouping, Expandable Rows and Row Selection so it's called the _Kitchen Sink_.
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="tannerlinsley/react-table: kitchen-sink"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
||||
* Want to add another example? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
name: Controlled
|
||||
route: /examples/controlled
|
||||
menu: Examples
|
||||
---
|
||||
|
||||
# Controlled
|
||||
|
||||
These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
|
||||
|
||||
## Pagination (Controlled)
|
||||
|
||||
- [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)
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="tannerlinsley/react-table: pagination-controlled"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
||||
* Want to add another example? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
name: Simple
|
||||
route: /examples/simple
|
||||
menu: Examples
|
||||
---
|
||||
|
||||
# Simple
|
||||
|
||||
All of these examples use automatic state management, meaning, they don't hoist any state out of the table or manually control anything. Start here for understanding the basics about how to build your table UI.
|
||||
|
||||
## Basic
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/basic)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/basic)
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/basic?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="tannerlinsley/react-table: basic"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
||||
## Footers
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/footers)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/footers)
|
||||
|
||||
## Sorting
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sorting)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/sorting)
|
||||
|
||||
## Filtering
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/filtering)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/filtering)
|
||||
|
||||
## Grouping
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/grouping)
|
||||
|
||||
## Grouping (Single Column)
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping-column)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/grouping-column)
|
||||
|
||||
## Pagination
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/pagination)
|
||||
|
||||
## Row Selection
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/row-selection)
|
||||
|
||||
## Expanding
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/expanding)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/sub-components)
|
||||
|
||||
## Sub Components
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sub-components)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/sub-components)
|
||||
|
||||
## Editable Data
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/editable-data)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/editable-data)
|
||||
|
||||
## Column Ordering
|
||||
|
||||
- [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)
|
||||
|
||||
## Column Hiding
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-hiding)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-hiding)
|
||||
|
||||
## Column Resizing
|
||||
|
||||
- [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)
|
||||
|
||||
## Data-Driven Classes and Styles
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/data-driven-classes-and-styles)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/data-driven-classes-and-styles)
|
||||
|
||||
## Row DnD
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-dnd)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-dnd)
|
||||
|
||||
## Full Width Table (Table Elements with collapsible content)
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-table)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-table)
|
||||
|
||||
## Full Width Resizable Table (via `useFlexLayout`)
|
||||
|
||||
- [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)
|
||||
|
||||
* Want to add another example? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
name: UI/Rendering
|
||||
route: /examples/ui
|
||||
menu: Examples
|
||||
---
|
||||
|
||||
# UI and Rendering
|
||||
|
||||
These examples demonstrate how to use React Table with your favorite UI libraries or tools!
|
||||
|
||||
## Virtualized Rows (React-Window)
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="tannerlinsley/react-table: virtualized-rows"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
||||
## Animated (Framer-Motion)
|
||||
|
||||
- [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/master/examples/animated-framer-motion)
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="tannerlinsley/react-table: animated-framer-motion"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
||||
## Material-UI
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-components)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-components)
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/material-UI-components?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="tannerlinsley/react-table: material-UI-components"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
||||
## Material-UI Enhanced Table
|
||||
|
||||
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
|
||||
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="tannerlinsley/react-table: material-UI-enhanced-table"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
||||
## Todo
|
||||
|
||||
- [ ] Styled-Components
|
||||
- [ ] CSS
|
||||
- [ ] Bootstrap
|
||||
|
||||
* Want to write one of these examples or add another? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)
|
||||
@@ -1,3 +1,8 @@
|
||||
---
|
||||
name: FAQ
|
||||
route: /faq
|
||||
---
|
||||
|
||||
# FAQ
|
||||
|
||||
Below are some of the most frequently asked questions on how to use the React Table API to solve various table challenges you may encounter
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
---
|
||||
name: Installation
|
||||
route: /installation
|
||||
---
|
||||
|
||||
# Installation
|
||||
|
||||
Install React Table as a dependency using `npm` or `yarn`
|
||||
@@ -30,4 +35,4 @@ import {
|
||||
} from 'react-table'
|
||||
```
|
||||
|
||||
Once you've installed React Table, continue to [Concepts](./concepts.md) to read more about how to utilize its API
|
||||
Once you've installed React Table, continue to [Concepts](./concepts) to read more about how to utilize its API
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
---
|
||||
name: Quick Start
|
||||
route: /quickstart
|
||||
---
|
||||
|
||||
# Quick Start
|
||||
|
||||
As explained in the [Concepts](./concepts) document, react-table is a headless tool, meaning you'll have to build your own UI. We recognize this can be potentially daunting, so here's a very basic table to start with.
|
||||
|
||||
## Define Row Shape
|
||||
|
||||
When thinking about a table, you typically have a number of rows split into a number of columns. While table configurations can get far more complex with nested columns, subrows, etc. for this basic quick start, we need to define some data. Note that this data must be defined using [`React.useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) in order to take advantage of the power of memoization.
|
||||
|
||||
```javascript
|
||||
const data = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
col1: 'Hello',
|
||||
col2: 'World',
|
||||
},
|
||||
{
|
||||
col1: 'react-table',
|
||||
col2: 'rocks',
|
||||
},
|
||||
{
|
||||
col1: 'whatever',
|
||||
col2: 'you want',
|
||||
},
|
||||
],
|
||||
[]
|
||||
)
|
||||
```
|
||||
|
||||
## Define Columns
|
||||
|
||||
The first step to using react-table is to create a set of column definitions to pass into the `useTable` hook. These columns must be defined using `React.useMemo` in order to take advantage of the power of memoization.
|
||||
|
||||
```javascript
|
||||
const columns = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: 'Column 1',
|
||||
accessor: 'col1', // accessor is the "key" in the data
|
||||
},
|
||||
{
|
||||
Header: 'Column 2',
|
||||
accessor: 'col2',
|
||||
},
|
||||
],
|
||||
[]
|
||||
)
|
||||
```
|
||||
|
||||
## Implement `useTable` hook
|
||||
|
||||
Now that you have the basic `columns` and `data` defined, you can pass those into `useTable` and retrieve the properties you need.
|
||||
|
||||
```javascript
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
rows,
|
||||
prepareRow,
|
||||
} = useTable({ columns, data })
|
||||
```
|
||||
|
||||
If you're new to JavaScript (especially ES2015+), this syntax may look a little strange. The lefthand side of the assigment is using [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to extract the properties we need that are returned from the `useTable` hook (or function). On the right hand side, at a minimum, `useTable` needs to be provided with an object containing the memoized columns and data that we created above.
|
||||
|
||||
## Build a basic UI structure
|
||||
|
||||
OK, so that's great, we've implemented the hook, but we still don't have a table to show, right? Let's use the properties returned from `useTable` to build a basic table structure.
|
||||
|
||||
```javascript
|
||||
return (
|
||||
<table {...getTableProps()}>
|
||||
<thead>
|
||||
{headerGroups.map(headerGroup => (
|
||||
<tr {...headerGroup.getHeaderGroupProps()}>
|
||||
{headerGroup.headers.map(column => (
|
||||
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody {...getTableBodyProps()}>
|
||||
{rows.map(row => {
|
||||
prepareRow(row)
|
||||
return (
|
||||
<tr {...row.getRowProps()}>
|
||||
{row.cells.map(cell => {
|
||||
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
|
||||
})}
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
```
|
||||
|
||||
Again, if you're relatively new to JavaScript (or ES2015+ syntax), you may wonder, "What is with all the ...s?". This is the [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) that _spreads_ all properties of an object (or array) without having to manually extract them all. So, with the first row, `<table {...getRowProps()}>` will return a `table` element with all of the properties returned by `getTableProps()`.
|
||||
|
||||
## Final Result
|
||||
|
||||
If we put all of this together, we should get a very basic (boring) table. (_Styles added just to make it a little more attractive..._)
|
||||
|
||||
_The following example is a live component, so as you make changes in the code, it should update the table at the top._
|
||||
|
||||
import { Playground } from 'docz'
|
||||
import { useTable } from '../src/hooks/useTable'
|
||||
|
||||
<Playground>
|
||||
{() => {
|
||||
const data = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
col1: 'Hello',
|
||||
col2: 'World',
|
||||
},
|
||||
{
|
||||
col1: 'react-table',
|
||||
col2: 'rocks',
|
||||
},
|
||||
{
|
||||
col1: 'whatever',
|
||||
col2: 'you want',
|
||||
},
|
||||
],
|
||||
[]
|
||||
)
|
||||
const columns = React.useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: 'Column 1',
|
||||
accessor: 'col1', // accessor is the "key" in the data
|
||||
},
|
||||
{
|
||||
Header: 'Column 2',
|
||||
accessor: 'col2',
|
||||
},
|
||||
],
|
||||
[]
|
||||
)
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
rows,
|
||||
prepareRow,
|
||||
} = useTable({ columns, data })
|
||||
return (
|
||||
<table {...getTableProps()} style={{ border: 'solid 1px blue'}}>
|
||||
<thead>
|
||||
{headerGroups.map(headerGroup => (
|
||||
<tr {...headerGroup.getHeaderGroupProps()}>
|
||||
{headerGroup.headers.map(column => (
|
||||
<th {...column.getHeaderProps()} style={{ borderBottom: 'solid 3px red', background: 'aliceblue', color: 'black', fontWeight: 'bold'}}>{column.render('Header')}</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody {...getTableBodyProps()}>
|
||||
{rows.map(row => {
|
||||
prepareRow(row)
|
||||
return (
|
||||
<tr {...row.getRowProps()}>
|
||||
{row.cells.map(cell => {
|
||||
return <td {...cell.getCellProps()} style={{ padding: '10px', border: 'solid 1px gray', background: 'papayawhip'}}>{cell.render('Cell')}</td>
|
||||
})}
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}}
|
||||
</Playground>
|
||||
@@ -0,0 +1,23 @@
|
||||
export default {
|
||||
title: 'React Table Documentation',
|
||||
description: 'Documentation for the react-table library built in Docz',
|
||||
ignore: ['docs/README.md', 'examples/**/*.md'],
|
||||
propsParser: false,
|
||||
port: 3002,
|
||||
menu: [
|
||||
'Getting Started',
|
||||
'Installation',
|
||||
'Concepts',
|
||||
'Quick Start',
|
||||
{
|
||||
name: 'Examples',
|
||||
menu: ['Simple', 'Complex', 'Controlled', 'UI/Rendering'],
|
||||
},
|
||||
{ name: 'API', menu: ['Overview', 'useTable'] },
|
||||
'FAQ',
|
||||
'Contributing',
|
||||
'Code of Conduct',
|
||||
'Typescript',
|
||||
'Changelog',
|
||||
],
|
||||
}
|
||||
@@ -21,3 +21,5 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
.docz
|
||||
|
||||
@@ -65,7 +65,7 @@ By default, the sorting will be `alphanumeric`. This can be changed in your `col
|
||||
Other options include `basic` and `datetime`.
|
||||
Note that if you're planning on sorting numbers between 0 and 1, `basic` sorting will be more accurate.
|
||||
|
||||
More information can be found in the [API Docs](/docs/api/README.md#useSortBy)
|
||||
More information can be found in the [API Docs](/api/useSortBy)
|
||||
|
||||
````diff
|
||||
const columns = React.useMemo(
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
# COMMENT: This is a rule for Single Page Apps. Docz site is one...
|
||||
[[redirects]]
|
||||
from = "/*"
|
||||
to = "/"
|
||||
status = 200
|
||||
+8
-1
@@ -26,7 +26,10 @@
|
||||
"prepare": "yarn build",
|
||||
"release": "yarn publish",
|
||||
"releaseNext": "yarn publish --tag next",
|
||||
"format": "prettier {src,src/**,examples/*/src,examples/*/src/**}/*.{md,js,jsx,tsx} --write"
|
||||
"format": "prettier {src,src/**,examples/*/src,examples/*/src/**}/*.{md,js,jsx,tsx} --write",
|
||||
"docz:build": "docz build",
|
||||
"docz:dev": "docz dev",
|
||||
"docz:serve": "docz build && docz serve"
|
||||
},
|
||||
"files": [
|
||||
"CHANGELOG.md",
|
||||
@@ -95,5 +98,9 @@
|
||||
"rollup-plugin-size-snapshot": "^0.10.0",
|
||||
"rollup-plugin-terser": "^5.1.2",
|
||||
"serve": "^11.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"docz": "^2.2.0",
|
||||
"gatsby-theme-docz": "^2.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
export const Logo = () => (
|
||||
<img
|
||||
src="https://github.com/tannerlinsley/react-table/raw/master/media/logo.png"
|
||||
alt="react-table Logo"
|
||||
style={{ maxHeight: 50 }}
|
||||
/>
|
||||
)
|
||||
Reference in New Issue
Block a user