Skip to content

Commit 0c08d9d

Browse files
author
Kamran Asif
committed
more examples
1 parent 870b474 commit 0c08d9d

File tree

5 files changed

+266
-5
lines changed

5 files changed

+266
-5
lines changed

‎examples/CollapseExample.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/**
2+
* This file provided by Facebook is for non-commercial testing and evaluation
3+
* purposes only. Facebook reserves all rights not expressly granted.
4+
*
5+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9+
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11+
*/
12+
13+
"use strict";
14+
15+
let ExampleImage = require('./helpers/ExampleImage');
16+
let FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
17+
let FixedDataTable = require('fixed-data-table');
18+
let React = require('react');
19+
20+
const {Table, Column, Cell} = FixedDataTable;
21+
22+
const ImageCell = ({rowIndex, data, col, ...props}) => (
23+
<ExampleImage
24+
src={data.getObjectAt(rowIndex)[col]}
25+
/>
26+
);
27+
28+
const TextCell = ({rowIndex, data, col, ...props}) => (
29+
<Cell {...props}>
30+
{data.getObjectAt(rowIndex)[col]}
31+
</Cell>
32+
);
33+
34+
const CollapseCell = ({columnKey, rowIndex, collapsedRows, callback, ...props}) => (
35+
<Cell {...props}>
36+
<a onClick={() => callback(rowIndex)}>
37+
{collapsedRows.has(rowIndex) ? '\u25BC' : '\u25BA'}
38+
</a>
39+
</Cell>
40+
);
41+
42+
class DataListWrapper {
43+
constructor(indexMap, data) {
44+
this._indexMap = indexMap;
45+
this._data = data;
46+
}
47+
48+
getSize() {
49+
return this._indexMap.length;
50+
}
51+
52+
getObjectAt(index) {
53+
return this._data.getObjectAt(
54+
this._indexMap[index],
55+
);
56+
}
57+
}
58+
59+
class CollapseExample extends React.Component {
60+
constructor(props) {
61+
super(props);
62+
this.state = {
63+
collapsedRows: new Set(),
64+
filteredDataList: new FakeObjectDataListStore(2000)
65+
}
66+
67+
this._handleCollapseClick = this._handleCollapseClick.bind(this);
68+
this._rowHeightGetter = this._rowHeightGetter.bind(this);
69+
}
70+
71+
_handleCollapseClick(rowIndex) {
72+
let {collapsedRows} = this.state;
73+
collapsedRows.has(rowIndex) ? collapsedRows.delete(rowIndex) : collapsedRows.add(rowIndex);
74+
this.setState({
75+
collapsedRows: collapsedRows
76+
});
77+
}
78+
79+
_rowHeightGetter(index) {
80+
return this.state.collapsedRows.has(index) ? 100 : 50;
81+
}
82+
83+
render() {
84+
let {filteredDataList, collapsedRows} = this.state;
85+
86+
return (
87+
<div>
88+
<Table
89+
rowHeight={50}
90+
rowsCount={filteredDataList.getSize()}
91+
rowHeightGetter={this._rowHeightGetter}
92+
rowClass
93+
headerHeight={50}
94+
width={1000}
95+
height={500}
96+
{...this.props}>
97+
<Column
98+
cell={<CollapseCell callback={this._handleCollapseClick} collapsedRows={collapsedRows} />}
99+
fixed={true}
100+
width={30}
101+
/>
102+
<Column
103+
header={<Cell>First Name</Cell>}
104+
cell={<TextCell data={filteredDataList} col="firstName" />}
105+
fixed={true}
106+
width={100}
107+
/>
108+
<Column
109+
header={<Cell>Last Name</Cell>}
110+
cell={<TextCell data={filteredDataList} col="lastName" />}
111+
fixed={true}
112+
width={100}
113+
/>
114+
<Column
115+
header={<Cell>City</Cell>}
116+
cell={<TextCell data={filteredDataList} col="city" />}
117+
width={100}
118+
/>
119+
<Column
120+
header={<Cell>Street</Cell>}
121+
cell={<TextCell data={filteredDataList} col="street" />}
122+
width={200}
123+
/>
124+
<Column
125+
header={<Cell>Zip Code</Cell>}
126+
cell={<TextCell data={filteredDataList} col="zipCode" />}
127+
width={200}
128+
/>
129+
</Table>
130+
</div>
131+
);
132+
}
133+
}
134+
135+
module.exports = CollapseExample;

‎examples/HideColumnExample.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/**
2+
* This file provided by Facebook is for non-commercial testing and evaluation
3+
* purposes only. Facebook reserves all rights not expressly granted.
4+
*
5+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9+
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11+
*/
12+
13+
"use strict";
14+
15+
let FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
16+
let FixedDataTable = require('fixed-data-table');
17+
let React = require('react');
18+
let _ = require('lodash');
19+
20+
const {Table, Column, Cell} = FixedDataTable;
21+
22+
const HeaderCell = ({columnKey, callback, children, ...props}) => (
23+
<Cell {...props}>
24+
{children}
25+
<a style={{float: 'right'}} onClick={() => callback(columnKey)}>
26+
{'\u274C'}
27+
</a>
28+
</Cell>
29+
);
30+
31+
const TextCell = ({rowIndex, data, columnKey, ...props}) => (
32+
<Cell {...props}>
33+
{data.getObjectAt(rowIndex)[columnKey]}
34+
</Cell>
35+
);
36+
37+
let columnTitles = {
38+
'firstName': 'First Name',
39+
'lastName': 'Last Name',
40+
'city': 'City',
41+
'sentence': 'Sentence',
42+
'street': 'Street',
43+
'companyName': 'Company Name',
44+
'zipCode': 'Zip Code'
45+
};
46+
47+
let columnWidths = {
48+
firstName: 150,
49+
lastName: 150,
50+
city: 150,
51+
sentence: 240,
52+
street: 150,
53+
companyName: 200,
54+
zipCode: 100
55+
};
56+
57+
class HideColumnExample extends React.Component {
58+
constructor(props) {
59+
super(props);
60+
61+
this.state = {
62+
dataList: new FakeObjectDataListStore(10000),
63+
columnOrder: Object.keys(columnTitles)
64+
};
65+
66+
this._handleColumnHide = this._handleColumnHide.bind(this);
67+
this._resetColumns= this._resetColumns.bind(this);
68+
}
69+
70+
_handleColumnHide(columnKey) {
71+
let newColumnOrder = this.state.columnOrder.filter((column) => column !== columnKey);
72+
this.setState({
73+
columnOrder: newColumnOrder
74+
});
75+
}
76+
77+
_resetColumns() {
78+
this.setState({
79+
columnOrder: Object.keys(columnTitles)
80+
});
81+
}
82+
83+
render() {
84+
let {dataList} = this.state;
85+
let handleColumnHide = this._handleColumnHide;
86+
87+
return (
88+
<div>
89+
<button onClick={this._resetColumns}>Reset</button>
90+
<br />
91+
<Table
92+
rowHeight={30}
93+
headerHeight={50}
94+
rowsCount={dataList.getSize()}
95+
width={1000}
96+
height={500}
97+
{...this.props}>
98+
{this.state.columnOrder.map(function (columnKey, i) {
99+
return <Column
100+
columnKey={columnKey}
101+
key={i}
102+
header={<HeaderCell callback={handleColumnHide}>{columnTitles[columnKey]}</HeaderCell>}
103+
cell={<TextCell data={dataList} />}
104+
fixed={i === 0}
105+
width={columnWidths[columnKey]}
106+
/>;
107+
})}
108+
</Table>
109+
</div>
110+
);
111+
}
112+
}
113+
114+
module.exports = HideColumnExample;

‎examples/ScrollToExample.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const ImageCell = ({rowIndex, data, col, ...props}) => (
2525
/>
2626
);
2727

28-
const TextCell = ({rowIndex, data, col, query, ...props}) => (
28+
const TextCell = ({rowIndex, data, col, ...props}) => (
2929
<Cell {...props}>
3030
{data.getObjectAt(rowIndex)[col]}
3131
</Cell>
@@ -70,7 +70,6 @@ class ScrollToExample extends React.Component {
7070
_onFilterChange(e) {
7171
if (!e.target.value) {
7272
this.setState({
73-
query: null,
7473
matchedRows: [],
7574
});
7675
}
@@ -86,7 +85,6 @@ class ScrollToExample extends React.Component {
8685
}
8786

8887
this.setState({
89-
query: filterBy,
9088
matchedRows: filteredIndexes,
9189
});
9290
}
@@ -113,7 +111,7 @@ class ScrollToExample extends React.Component {
113111
}
114112

115113
render() {
116-
var {filteredDataList, index, currentIndex, matchedRows, query} = this.state;
114+
var {filteredDataList, currentIndex, matchedRows} = this.state;
117115

118116
var search = matchedRows.length ? (
119117
<span>
@@ -159,7 +157,7 @@ class ScrollToExample extends React.Component {
159157
/>
160158
<Column
161159
header={<Cell>First Name</Cell>}
162-
cell={<TextCell query={query} data={filteredDataList} col="firstName" />}
160+
cell={<TextCell data={filteredDataList} col="firstName" />}
163161
fixed={true}
164162
width={100}
165163
/>

‎site/Constants.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,18 @@ exports.ExamplePages = {
5757
file: EXAMPLES_LOCATION_BASE + 'ScollToExample.js',
5858
title: 'Jump to row',
5959
description: 'A table example that will list search matches and jump to specified row',
60+
},
61+
COLLAPSE_EXAMPLE: {
62+
location: 'example-collapse-rows.html',
63+
file: EXAMPLES_LOCATION_BASE + 'CollapseExample.js',
64+
title: 'Collapsable rows',
65+
description: 'A table example that will let the user collapse individual rows',
66+
},
67+
HIDE_COLUMN_EXAMPLE: {
68+
location: 'example-collapse.html',
69+
file: EXAMPLES_LOCATION_BASE + 'HideColumnExample.js',
70+
title: 'Hide Columns',
71+
description: 'A table example that is able to hide/show columns',
6072
},
6173
COLUMN_GROUPS_EXAMPLE: {
6274
location: 'example-column-groups.html',

‎site/examples/ExamplesPage.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ var EXAMPLE_COMPONENTS = {
3838
[ExamplePages.OBJECT_DATA_EXAMPLE.location]: require('../../examples/ObjectDataExample'),
3939
[ExamplePages.RESIZE_EXAMPLE.location]: require('../../examples/ResizeExample'),
4040
[ExamplePages.REORDER_EXAMPLE.location]: require('../../examples/ReorderExample'),
41+
[ExamplePages.HIDE_COLUMN_EXAMPLE.location]: require('../../examples/HideColumnExample'),
4142
[ExamplePages.SCROLL_TO_EXAMPLE.location]: require('../../examples/ScrollToExample'),
43+
[ExamplePages.COLLAPSE_EXAMPLE.location]: require('../../examples/CollapseExample'),
4244
[ExamplePages.FLEXGROW_EXAMPLE.location]: require('../../examples/FlexGrowExample'),
4345
[ExamplePages.COLUMN_GROUPS_EXAMPLE.location]: require('../../examples/ColumnGroupsExample'),
4446
[ExamplePages.FILTER_EXAMPLE.location]: require('../../examples/FilterExample'),

0 commit comments

Comments
 (0)