vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2025-10-16 11:55:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adds import instructions to the HOC README (#1168)

Browse Source 
* Adds import instructions to the HOC README

Also fixes up some language and remove other import instructions. It's better to just have the import instructions in just one place.

* Better visualizes a list of functions
This commit is contained in:
Evan Brodie 2019-01-31 12:02:12 -05:00 committed by Tanner Linsley
parent 1fddb1b97d
commit 0a1c12faca
1 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/hoc/README.md
View File

@ -36,6 +36,17 @@ But there is more documentation on the `select` HOC below.
## Currently Available HOCs
Any of the below HOCs can be imported from react-table like so:
```javascript
import ReactTable from "react-table";
import treeTableHOC from "react-table/lib/hoc/treeTable";
const TreeTable = treeTableHOC(ReactTable);
```
Swap `treeTable` and `TreeTable` with any of the other HOC names as necessary.
### TreeTable
TreeTable takes over the rendering of the generated pivot rows of ReactTable so that they appear more like an expandable Tree.
@ -45,9 +56,6 @@ It accomplishes this by rendering a 100% wide div and then only rendering the ce
Using it is as simple as doing the following:
```javascript
import ReactTable from "react-table";
import treeTableHOC from "react-table/lib/hoc/treeTable";
const TreeTable = treeTableHOC(ReactTable);
```
@ -96,7 +104,7 @@ SelectTreeTable is a combination of TreeTable and SelectTable.
To function correctly the chain has to be in the correct order as follows (see the comments in the guid on HOCs below).
```Javascript
```javascript
const SelectTreeTable = selectTableHOC(treeTableHOC(ReactTable));
```
@ -108,13 +116,12 @@ FoldableTable is a HOC that make the columns are foldable. The reason I develope
So foldable columns allow users to temporary hidden the unwanted to columns so that they can focus on the data that they want to see.
#### How it work
```javascfript
import ReactTable from 'react-table'
import FoldableTableHOC from 'react-table/lib/hoc/foldableTable'
#### How it works
```javascript
const FoldableTable = FoldableTableHOC(ReactTable);
```
It will scan all the columns which `foldable` is `true` and apply the foldable column feature. This feature will work for both normal columns and header columns as samples below.
- With Header Columns
@ -210,10 +217,13 @@ const defaultFoldButtonComponent = ({ header, collapsed, icon, onClick }) => {
HOC which allows any Cell in the row to toggle the row's
SubComponent (expand/collapse). Also allows the SubComponent to toggle itself. Technically supports toggling any row's SubComponent.
Expand functions available to any SubComponent or Column Cell:
toggleRowSubComponent
showRowSubComponent
hideRowSubComponent
These are the expand functions available to any SubComponent or Column Cell:
```
toggleRowSubComponent
showRowSubComponent
hideRowSubComponent
```
They are available through the `props.columnProps.rest` object.