Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New examples for responsive resize, custom styling, and tooltips #59

Merged
merged 7 commits into from
Oct 10, 2016
Merged

New examples for responsive resize, custom styling, and tooltips #59

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
652e629
Fix unknown props warnings on examples
wcjordan Oct 6, 2016
494c05c
Improved example performance
wcjordan Oct 7, 2016
a2889ec
Add resonsive resize example and cleanup ExamplesPage with react-dime…
wcjordan Oct 8, 2016
439a63d
Add styling and tooltip examples
wcjordan Oct 9, 2016
884d0c4
fix node_env
wcjordan Oct 9, 2016
5d790ed
Merge branch 'master' into new_examples
wcjordan Oct 10, 2016
91074ae
PR changes
wcjordan Oct 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 14 additions & 24 deletions examples/CollapseExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,10 @@

"use strict";

let FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
let FixedDataTable = require('fixed-data-table-2');
let React = require('react');

const {Table, Column, Cell} = FixedDataTable;

const TextCell = ({rowIndex, data, col, ...props}) => (
<Cell {...props}>
{data.getObjectAt(rowIndex)[col]}
</Cell>
);

const CollapseCell = ({rowIndex, collapsedRows, callback, ...props}) => (
<Cell {...props}>
<a onClick={() => callback(rowIndex)}>
{collapsedRows.has(rowIndex) ? '\u25BC' : '\u25BA'}
</a>
</Cell>
);
const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
const { CollapseCell, TextCell } = require('./helpers/cells');
const { Table, Column, Cell } = require('fixed-data-table-2');
const React = require('react');

class CollapseExample extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -67,30 +52,35 @@ class CollapseExample extends React.Component {
width={30}
/>
<Column
columnKey="firstName"
header={<Cell>First Name</Cell>}
cell={<TextCell data={dataList} col="firstName" />}
cell={<TextCell data={dataList} />}
fixed={true}
width={100}
/>
<Column
columnKey="lastName"
header={<Cell>Last Name</Cell>}
cell={<TextCell data={dataList} col="lastName" />}
cell={<TextCell data={dataList} />}
fixed={true}
width={100}
/>
<Column
columnKey="city"
header={<Cell>City</Cell>}
cell={<TextCell data={dataList} col="city" />}
cell={<TextCell data={dataList} />}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved these to columnKey which I believe is more inline with best practices

width={100}
/>
<Column
columnKey="street"
header={<Cell>Street</Cell>}
cell={<TextCell data={dataList} col="street" />}
cell={<TextCell data={dataList} />}
width={200}
/>
<Column
columnKey="zipCode"
header={<Cell>Zip Code</Cell>}
cell={<TextCell data={dataList} col="zipCode" />}
cell={<TextCell data={dataList} />}
width={200}
/>
</Table>
Expand Down
28 changes: 12 additions & 16 deletions examples/ColumnGroupsExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,10 @@

"use strict";

var ExampleImage = require('./helpers/ExampleImage');
var FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
var FixedDataTable = require('fixed-data-table-2');
var React = require('react');

const {Table, Column, ColumnGroup, Cell} = FixedDataTable;

const TextCell = ({rowIndex, data, col, ...props}) => (
<Cell {...props}>
{data.getObjectAt(rowIndex)[col]}
</Cell>
);
const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
const { TextCell } = require('./helpers/cells');
const { Table, Column, ColumnGroup, Cell } = require('fixed-data-table-2');
const React = require('react');

class ColumnGroupsExample extends React.Component {
constructor(props) {
Expand All @@ -42,29 +34,33 @@ class ColumnGroupsExample extends React.Component {
fixed={true}
header={<Cell>Name</Cell>}>
<Column
columnKey="firstName"
fixed={true}
header={<Cell>First Name</Cell>}
cell={<TextCell data={dataList} col="firstName" />}
cell={<TextCell data={dataList} />}
width={150}
/>
<Column
columnKey="lastName"
fixed={true}
header={<Cell>Last Name</Cell>}
cell={<TextCell data={dataList} col="lastName" />}
cell={<TextCell data={dataList} />}
width={150}
/>
</ColumnGroup>
<ColumnGroup
header={<Cell>About</Cell>}>
<Column
columnKey="companyName"
header={<Cell>Company</Cell>}
cell={<TextCell data={dataList} col="companyName" />}
cell={<TextCell data={dataList} />}
flexGrow={1}
width={150}
/>
<Column
columnKey="sentence"
header={<Cell>Sentence</Cell>}
cell={<TextCell data={dataList} col="sentence" />}
cell={<TextCell data={dataList} />}
flexGrow={1}
width={150}
/>
Expand Down
41 changes: 17 additions & 24 deletions examples/FilterExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,11 @@

"use strict";

var ExampleImage = require('./helpers/ExampleImage');
var FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
var FixedDataTable = require('fixed-data-table-2');
var React = require('react');

const {Table, Column, Cell} = FixedDataTable;

const ImageCell = ({rowIndex, data, col, ...props}) => (
<ExampleImage
src={data.getObjectAt(rowIndex)[col]}
/>
);

const TextCell = ({rowIndex, data, col, ...props}) => (
<Cell {...props}>
{data.getObjectAt(rowIndex)[col]}
</Cell>
);
const ExampleImage = require('./helpers/ExampleImage');
const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
const { ImageCell, TextCell } = require('./helpers/cells');
const { Table, Column, Cell } = require('fixed-data-table-2');
const React = require('react');

class DataListWrapper {
constructor(indexMap, data) {
Expand Down Expand Up @@ -91,35 +78,41 @@ class FilterExample extends React.Component {
height={500}
{...this.props}>
<Column
cell={<ImageCell data={filteredDataList} col="avartar" />}
columnKey="avatar"
cell={<ImageCell data={filteredDataList} />}
fixed={true}
width={50}
/>
<Column
columnKey="firstName"
header={<Cell>First Name</Cell>}
cell={<TextCell data={filteredDataList} col="firstName" />}
cell={<TextCell data={filteredDataList} />}
fixed={true}
width={100}
/>
<Column
columnKey="lastName"
header={<Cell>Last Name</Cell>}
cell={<TextCell data={filteredDataList} col="lastName" />}
cell={<TextCell data={filteredDataList} />}
fixed={true}
width={100}
/>
<Column
columnKey="city"
header={<Cell>City</Cell>}
cell={<TextCell data={filteredDataList} col="city" />}
cell={<TextCell data={filteredDataList} />}
width={100}
/>
<Column
columnKey="street"
header={<Cell>Street</Cell>}
cell={<TextCell data={filteredDataList} col="street" />}
cell={<TextCell data={filteredDataList} />}
width={200}
/>
<Column
columnKey="zipCode"
header={<Cell>Zip Code</Cell>}
cell={<TextCell data={filteredDataList} col="zipCode" />}
cell={<TextCell data={filteredDataList} />}
width={200}
/>
</Table>
Expand Down
43 changes: 12 additions & 31 deletions examples/FlexGrowExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,10 @@

"use strict";

var FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
var FixedDataTable = require('fixed-data-table-2');
var React = require('react');

const {Table, Column, Cell} = FixedDataTable;

function colorizeText(str, index) {
var val, n = 0;
return str.split('').map((letter) => {
val = index * 70 + n++;
var color = 'hsl(' + val + ', 100%, 50%)';
return <span style={{color}} key={val}>{letter}</span>;
});
}


const TextCell = ({rowIndex, data, col, ...props}) => (
<Cell {...props}>
{data.getObjectAt(rowIndex)[col]}
</Cell>
);

const ColoredTextCell = ({rowIndex, data, col, ...props}) => (
<Cell {...props}>
{colorizeText(data.getObjectAt(rowIndex)[col], rowIndex)}
</Cell>
);
const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
const { TextCell, ColoredTextCell } = require('./helpers/cells');
const { Table, Column, Cell } = require('fixed-data-table-2');
const React = require('react');

class FlexGrowExample extends React.Component {
constructor(props) {
Expand All @@ -52,27 +29,31 @@ class FlexGrowExample extends React.Component {
height={500}
{...this.props}>
<Column
columnKey="firstName"
header={<Cell>First Name</Cell>}
cell={<TextCell data={dataList} col="firstName" />}
cell={<TextCell data={dataList} />}
fixed={true}
width={100}
/>
<Column
columnKey="sentence"
header={<Cell>Sentence! (flexGrow greediness=2)</Cell>}
cell={<ColoredTextCell data={dataList} col="sentence" />}
cell={<ColoredTextCell data={dataList} />}
flexGrow={2}
width={200}
/>
<Column
columnKey="companyName"
header={<Cell>Company (flexGrow greediness=1)</Cell>}
cell={<TextCell data={dataList} col="companyName" />}
cell={<TextCell data={dataList} />}
flexGrow={1}
width={200}
/>
<Column
columnKey="lastName"
width={100}
header={<Cell>Last Name</Cell>}
cell={<TextCell data={dataList} col="lastName" />}
cell={<TextCell data={dataList} />}
/>
</Table>
);
Expand Down
26 changes: 5 additions & 21 deletions examples/HideColumnExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,10 @@

"use strict";

let FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
let FixedDataTable = require('fixed-data-table-2');
let React = require('react');

const {Table, Column, Cell} = FixedDataTable;

const HeaderCell = ({columnKey, callback, children, ...props}) => (
<Cell {...props}>
{children}
<a style={{float: 'right'}} onClick={() => callback(columnKey)}>
{'\u274C'}
</a>
</Cell>
);

const TextCell = ({rowIndex, data, columnKey, ...props}) => (
<Cell {...props}>
{data.getObjectAt(rowIndex)[columnKey]}
</Cell>
);
const FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
const { ColoredTextCell, RemovableHeaderCell, TextCell } = require('./helpers/cells');
const { Table, Column, Cell } = require('fixed-data-table-2');
const React = require('react');

let columnTitles = {
'firstName': 'First Name',
Expand Down Expand Up @@ -90,7 +74,7 @@ class HideColumnExample extends React.Component {
return <Column
columnKey={columnKey}
key={i}
header={<HeaderCell callback={handleColumnHide}>{columnTitles[columnKey]}</HeaderCell>}
header={<RemovableHeaderCell callback={handleColumnHide}>{columnTitles[columnKey]}</RemovableHeaderCell>}
cell={<TextCell data={dataList} />}
fixed={i === 0}
width={columnWidths[columnKey]}
Expand Down
Loading