1 | Reactabular provides three components: `Table.Provider`, `Table.Header`, and `Table.Body`. `Table.Provider` sets the data context. It may contain multiple `Table.Header` and `Table.Body` elements. You can control data per body while the provider maintains a shared column definition.
|
2 |
|
3 | ## `Table.Provider`
|
4 |
|
5 | `Table.Provider` is the core of Reactabular. It sets up a [context](https://facebook.github.io/react/docs/context.html) and maps the `column` definition to its children components. The following example illustrates the basic idea.
|
6 |
|
7 | ```jsx
|
8 | /*
|
9 | import { Table } from 'reactabular';
|
10 | */
|
11 |
|
12 | const rows = [
|
13 | {
|
14 | id: 100,
|
15 | name: 'Adam',
|
16 | dad: 'John',
|
17 | lovesBeeGees: true
|
18 | },
|
19 | {
|
20 | id: 101,
|
21 | name: 'Brian',
|
22 | dad: 'George',
|
23 | lovesBeeGees: false
|
24 | },
|
25 | ];
|
26 |
|
27 | const columns = [
|
28 | {
|
29 | property: 'name',
|
30 | header: {
|
31 | label: 'Name'
|
32 | }
|
33 | },
|
34 | {
|
35 | property: 'dad',
|
36 | header: {
|
37 | label: 'Dad'
|
38 | }
|
39 | }
|
40 | ];
|
41 |
|
42 | <Table.Provider
|
43 | className="pure-table pure-table-striped"
|
44 | columns={columns}
|
45 | >
|
46 | <Table.Header />
|
47 |
|
48 | <Table.Body rows={rows} rowKey="id" />
|
49 | </Table.Provider>
|
50 | ```
|
51 |
|
52 | ## `Table.Header`
|
53 |
|
54 | `Table.Header` renders a table header within a `Table.Provider` context.
|
55 |
|
56 | ```react
|
57 | <Table.Provider
|
58 | className="pure-table pure-table-striped"
|
59 | columns={columns}
|
60 | >
|
61 | <Table.Header />
|
62 |
|
63 | <Table.Body rows={rows} rowKey="id"/>
|
64 |
|
65 | <Table.Header />
|
66 | </Table.Provider>
|
67 | ```
|
68 |
|
69 | ## Customizing `Table.Header`
|
70 |
|
71 | It is possible to customize a header by passing child components to it. This way you can implement filtering per column for instance.
|
72 |
|
73 | Here `VisibilityToggles` injects an additional row for the filter controls. An alternative way to handle it would be to push the problem to the column definition.
|
74 |
|
75 | ```react
|
76 | <Table.Provider
|
77 | className="pure-table pure-table-striped"
|
78 | columns={columns}
|
79 | >
|
80 | <Table.Header>
|
81 | <SearchColumns
|
82 | query={{}}
|
83 | columns={columns}
|
84 | onChange={value => console.log('new value', value)}
|
85 | />
|
86 | </Table.Header>
|
87 |
|
88 | <Table.Body rows={rows} rowKey="id" />
|
89 | </Table.Provider>
|
90 | ```
|
91 |
|
92 | ## `Table.Body`
|
93 |
|
94 | `Table.Body` renders table `rows` within a `Table.Provider` context. It accepts either an array of objects or an array of arrays (see the [Excel example](/examples/excel)). In the former case you should define a `rowKey`. This allows React to render in a more performant way.
|
95 |
|
96 | Most often you'll define `rowKey` as a string. An alternative is to define it using a function like this: `rowKey={({ rowData, rowIndex }) => rowData.nested.id}`. This is useful if your key is nested or related to some other data. Another way to avoid this problem is to generate the field using `reactabular-resolve` and then point to that through a string.
|
97 |
|
98 | **Example:**
|
99 |
|
100 | ```react
|
101 | <Table.Provider
|
102 | className="pure-table pure-table-striped"
|
103 | columns={columns}
|
104 | >
|
105 | <Table.Header />
|
106 |
|
107 | <Table.Body rows={rows.filter(r => r.name === 'Adam')} rowKey="id" />
|
108 |
|
109 | <Table.Header />
|
110 |
|
111 | <Table.Body rows={rows.filter(r => r.name === 'Brian')} rowKey="id" />
|
112 | </Table.Provider>
|
113 | ```
|
114 |
|
115 | ## Getting Refs
|
116 |
|
117 | Sometimes you might need to access the underlying DOM nodes for measuring etc. This can be achieved as follows:
|
118 |
|
119 | ```react
|
120 | class RefTable extends React.Component {
|
121 | constructor(props) {
|
122 | super(props);
|
123 |
|
124 | this.onRow = this.onRow.bind(this);
|
125 |
|
126 | this.headerRef = null;
|
127 | this.bodyRef = null;
|
128 | }
|
129 | render() {
|
130 | return (
|
131 | <Table.Provider columns={columns}>
|
132 | <Table.Header
|
133 | ref={header => {
|
134 | this.headerRef = header && header.getRef();
|
135 | }}
|
136 | />
|
137 | <Table.Body
|
138 | ref={body => {
|
139 | this.bodyRef = body && body.getRef();
|
140 | }}
|
141 | rows={rows}
|
142 | rowKey="id"
|
143 | onRow={this.onRow}
|
144 | />
|
145 | </Table.Provider>
|
146 | );
|
147 | }
|
148 | onRow(row, { rowIndex, rowKey }) {
|
149 | return {
|
150 | onClick: () => console.log(this.headerRef, this.bodyRef)
|
151 | };
|
152 | }
|
153 | }
|
154 |
|
155 | <RefTable />
|
156 | ```
|
157 |
|
158 | It's the same idea for `Table.Body`.
|
159 |
|
160 | ## Customizing `Table.Body` Rows
|
161 |
|
162 | It is possible to customize body behavior on a row level. `onRow` prop accepts function `(row, { rowIndex, rowKey }) => ({...})` that allows you to set custom attributes per each row.
|
163 |
|
164 | ```react
|
165 | class CustomTable extends React.Component {
|
166 | render() {
|
167 | return (
|
168 | <Table.Provider
|
169 | className="pure-table pure-table-striped"
|
170 | columns={columns}
|
171 | >
|
172 | <Table.Header />
|
173 |
|
174 | <Table.Body
|
175 | rows={rows}
|
176 | rowKey="id"
|
177 | onRow={this.onRow}
|
178 | />
|
179 | </Table.Provider>
|
180 | );
|
181 | }
|
182 | onRow(row, { rowIndex, rowKey }) {
|
183 | return {
|
184 | onClick: () => console.log('clicked row', row)
|
185 | };
|
186 | }
|
187 | }
|
188 |
|
189 | <CustomTable />
|
190 | ```
|
191 |
|
192 | It's a good idea to define a possible `row` handler separately to avoid binding per each `render`. If you write the handler inline, it will bind each time `render()` is called and reduce performance slightly.
|
193 |
|
194 | ## Customizing `Table` Footer
|
195 |
|
196 | It is possible to inject a custom footer like this:
|
197 |
|
198 | ```react
|
199 | <Table.Provider
|
200 | className="pure-table pure-table-striped"
|
201 | columns={columns}
|
202 | >
|
203 | <Table.Header />
|
204 |
|
205 | <Table.Body rows={rows} rowKey="id" />
|
206 |
|
207 | <tfoot>
|
208 | <tr>
|
209 | <td>Show custom rows here</td>
|
210 | <td>Show custom rows here</td>
|
211 | </tr>
|
212 | </tfoot>
|
213 | </Table.Provider>
|
214 | ```
|
215 |
|
216 | ## See Also
|
217 |
|
218 | * [Selection](http://reactabular.js.org/#/examples/selection)
|