Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
clarify basic example in README (#217)
  • Loading branch information
durangatan authored and wcjordan committed Aug 29, 2017
1 parent d7f8f3a commit 0b7813c
Showing 1 changed file with 93 additions and 5 deletions.
98 changes: 93 additions & 5 deletions README.md
Expand Up @@ -36,21 +36,109 @@ npm install fixed-data-table-2
```
Add the default stylesheet `dist/fixed-data-table.css` using a link tag or import it with a CSS module.

Implementing a table involves three component types- `<Table/>`,`<Column/>`, and `<Cell/>`.

`<Table />` contains configuration information for the entire table, like dimensions and row count. It's also where you pass down the data to be rendered in the table.

```javascript

const rows =[0,1,2];

<Table
rowHeight={50}
rowsCount={100}
width={5000}
height={5050}
headerHeight={50}
data={rows}>
...
</Table>
```

`<Column />` defines the way data is displayed for one column in the table, including all cell behavior for that column. Rather than manipulating each cell directly, pass a cell component as a prop to the column, and the column will render a cell for each index in the data array.

```javascript
<Column
header={<Cell>Col 1</Cell>}
cell={<Cell>Column 1</Cell>}
width={2000}
/>
```
The cell components in a column will receive the current array index of your data as a prop (`this.props.rowIndex`). Use this to access the correct value for each cell.
```javascript
const rows = [0,1,2];

<Column
header={<Cell>Column 1</Cell>}
cell={({rowIndex, ...props}) => (
<Cell {...props}>
{rows[rowIndex]}
</Cell>
)}
width={2000}
/>
```

If your data is an array of objects, define a `columnKey` prop for each column and it too will be passed to all cells in that column.
```javascript
const rows = [
{ someKey: "someValue" },
{ someKey: "anotherValue" },
{ someKey: "yetAnother" }
];

<Column
header={<Cell>Col 1</Cell>}
columnKey="someKey"
cell={({ rowIndex, columnKey, ...props }) =>
<Cell {...props}>
{rows[rowIndex][columnKey]}
</Cell>}
width={2000}
/>;


```

You may find it useful to define custom Cell components, which can also be passed to the Column:
```javascript
const MyCustomCell = ({ isSpecial }) =>
<Cell>
{isSpecial ? "I'm Special" : "I'm Not Special"}
</Cell>;


<Column
header={<Cell>Col 3</Cell>}
cell={<MyCustomCell isSpecial/>}
width={2000}
/>

```

### Code Sample
Note this doesn't include a definition for MyCustomCell and won't work out of the box. For more detailed examples, please see the [examples section](http://schrodinger.github.io/fixed-data-table-2/example-object-data.html) of the documentation. If you need help getting started with a React build system, we recommend [create-react-app](https://github.com/facebookincubator/create-react-app).
For more detailed examples, please see the [examples section](http://schrodinger.github.io/fixed-data-table-2/example-object-data.html) of the documentation. If you need help getting started with a React build system, we recommend [create-react-app](https://github.com/facebookincubator/create-react-app).
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table-2';
import 'fixed-data-table-2/dist/fixed-data-table.css';


// Table data as a list of array.
const rows = [
['a1', 'b1', 'c1'],
['a2', 'b2', 'c2'],
['a3', 'b3', 'c3'],
"first row",
"second row",
"third row"
// .... and more
];

// Custom cell implementation with special prop
const MyCustomCell = ({ mySpecialProp }) =>
<Cell>
{mySpecialProp === "column2" ? "I'm column 2" : "I'm not column 2"}
</Cell>;

// Render your table
ReactDOM.render(
<Table
Expand All @@ -73,7 +161,7 @@ ReactDOM.render(
header={<Cell>Col 3</Cell>}
cell={({rowIndex, ...props}) => (
<Cell {...props}>
Data for column 3: {rows[rowIndex][2]}
Data for column 3: {rows[rowIndex]}
</Cell>
)}
width={2000}
Expand Down

0 comments on commit 0b7813c

Please sign in to comment.