diff --git a/README.md b/README.md index b8a19bb..38f4f60 100644 --- a/README.md +++ b/README.md @@ -29,12 +29,14 @@ A fast, lightweight, opinionated table and datagrid built on React - [Multi-sort](#multi-sort) - [Component Overrides](#component-overrides) -## Installation + +## Installation ```bash $ npm install react-table ``` -## Example + +## Example ```javascript import ReactTable from 'react-table' @@ -69,11 +71,13 @@ const columns = [{ /> ``` -## Data + +## Data Every React-Table instance requires you to set the `data` prop. To use client-side data, simply pass the `data` prop anything that resembles an array or object. Client-side filtering and pagination is built in, and your table will update gracefully if you change any props. [Server-side data](#server-side-data) is also supported. -## Default Props + +## Default Props These are the default props for the main react component `` ```javascript { @@ -120,7 +124,8 @@ Or just define them on the component per-instance /> ``` -## Columns + +## Columns Every React-Table instance requires a `columns` prop, which is an array of objects containing the following properties ```javascript @@ -145,10 +150,12 @@ Every React-Table instance requires a `columns` prop, which is an array of objec }] ``` -## Styles + +## 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 :) -## Header Groups + +## Header Groups To group columns with another header column, just nest your columns in a header column like so: ```javascript const columns = [{ @@ -166,7 +173,8 @@ const columns = [{ }] ``` -## Server-side Data + +## Server-side Data If you want to handle pagination, and sorting on the server, `react-table` makes it easy on you. Instead of passing the `data` prop an array, you provide a function instead. This function will be called on mount, pagination events, and sorting events. It also provides you all of the parameters to help you query and format your data. @@ -208,10 +216,12 @@ This function will be called on mount, pagination events, and sorting events. It /> ``` -## Multi-Sort + +## Multi-Sort When clicking on a column header, hold shift to multi-sort! You can toggle `ascending` `descending` and `none` for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy! -## Component Overrides + +## Component Overrides Though we wouldn't suggest it, `react-table` has the ability to change the core componentry it used to render it's table. You can do so by assigning a react component to it's corresponding global prop, or on a one-off basis like so: ```javascript // Change the global default