vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2026-07-01 01:50:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Styling fixes and documentation

Browse Source
This commit is contained in:
Tanner Linsley
2017-01-22 10:26:49 -07:00
parent 3d325dad8d
commit 33645b4fea
12 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@@ -53,9 +53,27 @@
- [Component Overrides](#component-overrides)
## Installation
1. Install React Table as a dependency
```bash
$ npm install react-table
# or
$ yarn react-table
```
2. Import the `react-table` module
```javascript
// ES6
import ReactTable from 'react-table'
// ES5
var ReactTable = require('react-table').default
```
3. Import styles by including `react-table.css` anywhere on the page
```javascript
// JS (Webpack)
import 'react-table/react-table.css'
// html
<link rel="stylesheet" href="node_modules/react-table/react-table.css">
```
## Example
```javascript
@@ -211,7 +229,12 @@ Or just define them on the component per-instance
```
## Styles
React-table is built to be dropped into existing applications or styled from the ground up, but if you'd like a decent starting point, you can optionally include our default theme `react-table.css`. We think it looks great, honestly :)
React-table ships with a minimal and clean stylesheet to get you on your feet quickly. It's located at `react-table/react-table.css`.
- Adding a `-striped` className to ReactTable will slightly color odd numbered rows for legibility
- Adding a `-highlight` className to ReactTable will highlight any row as you hover over it
We think the default styles looks great! But, if you prefer a more custom look, all of the included styles are easily overridable. Every single component contains a unique class that makes it super easy to customize. Just go for it!
## Header Groups
To group columns with another header column, just nest your columns in a header column like so:

2
docs/iframe.html
View File

@@ -16,7 +16,7 @@
<body>
<div id="root"></div>
<div id="error-display"></div>
<script src="static/preview.1667fe2cb75e785a5958.bundle.js"></script>
<script src="static/preview.254c6d60467ce3c21d01.bundle.js"></script>
</body>
</html>

16
docs/static/preview.1667fe2cb75e785a5958.bundle.js → docs/static/preview.254c6d60467ce3c21d01.bundle.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/static/preview.1667fe2cb75e785a5958.bundle.js.map → docs/static/preview.254c6d60467ce3c21d01.bundle.js.map vendored
View File

@@ -1 +1 @@
{"version":3,"file":"static/preview.1667fe2cb75e785a5958.bundle.js","sources":["webpack:///static/preview.1667fe2cb75e785a5958.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AA6rDA;AAokFA;AAy9FA;AA4nJA;AA1pHA;AAgsWA;AAm0DA;AA0kEA;AA6nDA;AAi9CA;AA8iEA;AAipDA;AAy8CA;AAmoDA;AAktEA;AA6pDA;AAwuCA;AA8oDA;AA6kDA;AA8pEA;AAu2DA;AAgpDA;AAwkDA;AAm5EA;AA0mHA;AA4rDA;AA4/BA;AA08CA;AAiXA;AAy/CA","sourceRoot":""}
{"version":3,"file":"static/preview.254c6d60467ce3c21d01.bundle.js","sources":["webpack:///static/preview.254c6d60467ce3c21d01.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AA6rDA;AAokFA;AAy9FA;AA4nJA;AA1pHA;AAgsWA;AAm0DA;AA0kEA;AA6nDA;AAi9CA;AA8iEA;AAipDA;AAy8CA;AAmoDA;AAktEA;AA6pDA;AAwuCA;AA8oDA;AA6kDA;AA8pEA;AAu2DA;AAgpDA;AAwkDA;AAm5EA;AA0mHA;AA6rDA;AAugCA;AAs8CA;AA6WA;AA+9CA","sourceRoot":""}

2
src/index.js
View File

@@ -45,7 +45,7 @@ export const ReactTableDefaults = {
onTrClick: () => null,
// Classes
className: '-striped -highlight',
className: '',
tableClassName: '',
theadClassName: '',
tbodyClassName: '',

1
stories/CellRenderers.js
View File

@@ -81,6 +81,7 @@ export default () => {
<div>
<div className='table-wrap'>
<ReactTable
className='-striped -highlight'
data={data}
columns={columns}
defaultPageSize={10}

1
stories/OneHundredKRows.js
View File

@@ -47,6 +47,7 @@ export default () => {
<ReactTable
data={data}
columns={columns}
className='-striped -highlight'
defaultPageSize={10}
pivotBy={['firstName', 'lastName']}
SubComponent={(row) => {

1
stories/Pivoting.js
View File

@@ -47,6 +47,7 @@ export default () => {
<ReactTable
data={data}
columns={columns}
className='-striped -highlight'
defaultPageSize={10}
pivotBy={['firstName', 'lastName']}
// expandedRows={{

1
stories/PivotingSubComponents.js
View File

@@ -48,6 +48,7 @@ export default () => {
data={data}
columns={columns}
defaultPageSize={10}
className='-striped -highlight'
pivotBy={['firstName', 'lastName']}
SubComponent={(row) => {
return (

1
stories/ServerSide.js
View File

@@ -68,6 +68,7 @@ const ServerSide = React.createClass({
<div>
<div className='table-wrap'>
<ReactTable
className='-striped -highlight'
columns={[{
header: 'First Name',
accessor: 'firstName'

1
stories/Simple.js
View File

@@ -36,6 +36,7 @@ export default () => {
<div>
<div className='table-wrap'>
<ReactTable
className='-striped -highlight'
data={data}
columns={columns}
defaultPageSize={10}

1
stories/SubComponents.js
View File

@@ -36,6 +36,7 @@ export default () => {
<div>
<div className='table-wrap'>
<ReactTable
className='-striped -highlight'
data={data}
columns={columns}
defaultPageSize={10}