https://github.com/auru/unity-table
Table component for React
https://github.com/auru/unity-table
component react table
Last synced: 3 months ago
JSON representation
Table component for React
- Host: GitHub
- URL: https://github.com/auru/unity-table
- Owner: auru
- Created: 2017-07-21T12:15:44.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2021-06-04T11:26:12.000Z (about 5 years ago)
- Last Synced: 2026-04-08T09:10:34.057Z (4 months ago)
- Topics: component, react, table
- Language: JavaScript
- Size: 356 KB
- Stars: 2
- Watchers: 4
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# unity-table
[](https://greenkeeper.io/)
> Table component for React
* [SimpleTable](#simpletable)
* [Displaying raw data](#displaying-raw-data)
* [Decorating data](#decorating-data)
* [Specifying column widths](#specifying-column-widths)
* [Specifying column attributes](#specifying-column-attributes)
* [Sort data](#sort-data)
* [Plain usage (layout only)](#plain-usage-layout-only)
## `SimpleTable`
### Displaying raw data
```jsx
import {SimpleTable} from 'unity-table';
const columns = [
{name: 'title'},
{name: 'episode_id'},
{name: 'release_date'},
{name: 'director'},
{name: 'producer'}
];
const tableHead = () => ({
title: 'Title',
episode_id: 'Episode number',
release_date: 'Release date',
director: 'Director',
producer: 'Producers'
});
const Example = () => (
);
```
### Decorating data
```jsx
const columns = ...;
const tableHead = ...;
// data mapping function
const mapData = ({title, episode_id, release_date, director, producer}) => ({
title,
episode_id,
release_date: humanDate(release_date), // <- butify date
director,
producer
});
const Example = () => (
);
```
### Specifying column widths
```jsx
const columns = [
{name: 'title', width: '150px'},
{name: 'episode_id', width: '60px'},
{name: 'release_date', width: '70px'},
{name: 'director', width: '90px'},
{name: 'producer', width: '230px'}
];
```
### Specifying column attributes
```jsx
const columns = ...;
const tableHead = ...;
const mapData = ({title, episode_id, director, producer}) => ({
title,
episode_id,
director,
producer
});
const mapAttrs = data => ({
title: {colSpan: 4}
});
const Example = () => (
);
```
### Sort data
```jsx
const columns = [
{name: 'title', width: '150px', sortable: true}, // <- available for sorting
{name: 'episode_id', width: '60px', sortable: true}, // <- available for sorting
{name: 'release_date', width: '70px', sortable: true}, // <- available for sorting
{name: 'director', width: '90px', sortable: true}, // <- available for sorting too
{name: 'producer', width: '230px'}
];
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
// initial sorting
sort: {field: 'release_date', asc: true}
};
this.handleSortChange = this.handleSortChange.bind(this);
}
handleSortChange({field, asc}) {
// set new sorting to the state
this.setState({sort: {field, asc}});
}
getSortedData() {
const {field, asc} = this.state.sort;
return sort(field, asc, data);
}
render() {
return (
);
}
}
```
## Plain usage (layout only)
```js
import {Table, Thead, Tbody, Tr, Th, Td} from 'unity-table';
const Example = () => (
Title
Episode number
Release date
Director
Producers
{data.map(planet => (
{film.title}
{film.episode_id}
{film.release_date}
{film.director}
{film.producer}
))}
);
```