Skip to content
Permalink
Browse files

Merge branch 'master' of https://github.com/react-tools/react-table

  • Loading branch information...
tannerlinsley committed Nov 5, 2019
2 parents fb94eaf + 3747f26 commit 00f223d78d643a476862533fa85435bbdd5ccd06
@@ -0,0 +1,27 @@
name: CI
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
build-and-test:
name: '${{ matrix.platform }}: node.js ${{ matrix.node-version }}'
strategy:
matrix:
platform: [ubuntu-latest, windows-latest, macos-latest]
node-version: [10, 12]
runs-on: ${{ matrix.platform }}
env:
CI: true
steps:
- name: Checkout
uses: actions/checkout@master
- name: Set up Node.js
uses: actions/setup-node@master
with:
node-version: ${{ matrix.node-version }}
- name: Build and test
run: |
yarn install
yarn test

This file was deleted.

@@ -4,32 +4,14 @@

Hooks for building **lightweight, fast and extendable datagrids** for React

<a href="https://travis-ci.org/tannerlinsley/react-table" target="\_parent">
<img alt="" src="https://travis-ci.org/tannerlinsley/react-table.svg?branch=master" />
</a>
<a href="https://bundlephobia.com/result?p=react-table@next" target="\_parent">
<img alt="" src="https://badgen.net/bundlephobia/minzip/react-table@next" />
</a>
<a href="https://npmjs.com/package/react-table" target="\_parent">
<img alt="" src="https://img.shields.io/npm/dm/react-table.svg" />
</a>
<a href="https://spectrum.chat/react-table">
<img alt="Join the community on Spectrum" src="https://withspectrum.github.io/badge/badge.svg" />
</a>
<a href="https://github.com/tannerlinsley/react-table" target="\_parent">
<img alt="" src="https://img.shields.io/github/stars/tannerlinsley/react-table.svg?style=social&label=Star" />
</a>
<a href="https://twitter.com/tannerlinsley" target="\_parent">
<img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
</a>
<br />
<br />
<a href="https://patreon.com/tannerlinsley">
<img width="180" alt="" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/become-a-patron.png" />
</a>
[![GitHub Actions CI](https://github.com/tannerlinsley/react-table/workflows/CI/badge.svg)](https://github.com/tannerlinsley/react-table/actions)
[![Bundlephobia](https://badgen.net/bundlephobia/minzip/react-table@next)](https://bundlephobia.com/result?p=react-table@next)
[![NPM Package](https://img.shields.io/npm/dm/react-table.svg)](https://npmjs.com/package/react-table)
[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-table)
[![GitHub Stars](https://img.shields.io/github/stars/tannerlinsley/react-table.svg?style=social&label=Star)](https://github.com/tannerlinsley/react-table)
[![Twitter Followers](https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow)](https://twitter.com/tannerlinsley)

<br />
<br />
### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/)

## Features

@@ -71,6 +53,8 @@ Please [visit the v6 branch](https://github.com/tannerlinsley/react-table/tree/v

The differences between the 2 versions are incredibly massive. Unfortunately, I cannot write a one-to-one upgrade guide for any of v6's API, simply because much of it is irrelevant with v7's headless approach. The best approach for migrating to v7 is to learn its API by reading the documentation and then following some of the examples to begin building your own table component.

In case you would need to have both v6 and v7 in one app during the migration process (large codebase, complex use cases), you can install an official [`react-table-v6` package](https://www.npmjs.com/package/react-table-v6) alongside the `react-table`.

## Documentation

- [Installation](./docs/installation.md) - Walk through how to install React Table
@@ -84,6 +68,21 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I

**React Table v7** is being built and maintained by me, @tannerlinsley and I am always in need of more Patreon support to keep this project afloat. If you would like to contribute to my Patreon goal for v7 and beyond, [visit my Patreon and help me out!](https://patreon.com/tannerlinsley)

<table>
<tbody>
<tr>
<td align="center" valign="middle">
<a href="https://github.com/sponsors/tannerlinsley" target="_blank">
<img width='230' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/diamond.png">
</a>
</td>
<td align="center" valign="middle">
Coming Soon!
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
@@ -154,7 +153,6 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
</a>
</td>
<td>
<div><a href="https://www.metso.com/">Pekka</a></div>
<div>Jon Eickmeier</div>
<div><a href="https://github.com/Shah-Sahab">Syed Hussain<a></div>
</td>
@@ -179,6 +177,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
<div>David Pickut</div>
<div>Jordan Soltman</div>
<div>Robert Tajnšek</div>
<div>Pekka Tapani</div>
</td>
</tr>
</tbody>
@@ -2,7 +2,7 @@

React-table is a very flexible library, because of this, the shape of data at almost every contact point is defined by the specific set of plugins that you choose to pass to `useTable`.

Tto get started, copy the file `react-table-config.d.ts` into your source tree (e.g. into a types folder). This expands the default types with all of the plugin extensions currently in the type definitions.
To get started, copy the file `react-table-config.d.ts` into your source tree (e.g. into a types folder). This expands the default types with all of the plugin extensions currently in the type definitions.

You can stop here if you like, but while this is simple, it's a bit misleading. Out of the box, these types will suggest that you have access to values that come from plugins that you aren't using, i.e. the error checking is weakened.

@@ -32,7 +32,7 @@ export interface TableOptions<D extends object>
UseSortByOptions<D> {}
```

Then follow the same pattern for all of the other interfaces in the file. You'll notice that many plugins don't extends all of the top level interfaces.
Then follow the same pattern for all of the other interfaces in the file. You'll notice that many plugins don't extend all of the top-level interfaces.

## Caveat

@@ -575,8 +575,8 @@ The following options are supported on any `Column` object passed to the `column
- Must return valid JSX
- This function (or component) formats this column's value when it is being grouped and aggregated, eg. If this column was showing the number of visits for a user to a website and it was currently being grouped to show an **average** of the values, the `Aggregated` function for this column could format that value to `1,000 Avg. Visits`
- `disableGrouping: Boolean`
- Defaults to `true`
- If `true`, this column is able to be grouped.
- Defaults to `false`
- If `true`, will disable grouping for this column.

### Instance Properties

@@ -93,18 +93,17 @@ function Table({ columns, data }) {

<div className="rows" {...getTableBodyProps()}>
{rows.map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<div {...row.getRowProps()} className="row body">
{row.cells.map(cell => {
return (
<div {...cell.getCellProps()} className="cell">
{cell.render('Cell')}
</div>
)
})}
{row.cells.map((cell,index) => (
<div {...cell.getCellProps()} key={index} className="cell">
{cell.render('Cell')}
</div>
))}
</div>
)
)}
)}
</div>
</div>
@@ -268,8 +268,9 @@ function Table({ columns, data }) {
<tbody {...getTableBodyProps()}>
<AnimatePresence>
{rows.slice(0, 10).map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<motion.tr
{...row.getRowProps({
layoutTransition: spring,
@@ -288,7 +289,7 @@ function Table({ columns, data }) {
)
})}
</motion.tr>
)
)}
)}
</AnimatePresence>
</tbody>
@@ -60,14 +60,15 @@ function Table({ columns, data }) {
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
)}
)}
</tbody>
</table>
@@ -76,8 +76,9 @@ function Table({ columns, data }) {

<div {...getTableBodyProps()}>
{rows.map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<div {...row.getRowProps()} className="tr">
{row.cells.map(cell => {
return (
@@ -87,7 +88,7 @@ function Table({ columns, data }) {
)
})}
</div>
)
)}
)}
</div>
</div>
@@ -81,16 +81,17 @@ function Table({ columns, data }) {
</thead>
<tbody {...getTableBodyProps()}>
{rows.slice(0, 10).map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell, i) => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
)
)}
)}
</tbody>
</table>
@@ -103,8 +103,9 @@ function Table({ columns, data }) {

<div {...getTableBodyProps()}>
{rows.map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<div {...row.getRowProps()} className="tr">
{row.cells.map(cell => {
return (
@@ -114,7 +115,7 @@ function Table({ columns, data }) {
)
})}
</div>
)
)}
)}
</div>
</div>
@@ -127,16 +127,17 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
</thead>
<tbody {...getTableBodyProps()}>
{page.map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
)
)}
)}
</tbody>
</table>
@@ -63,16 +63,17 @@ function Table({ columns: userColumns, data }) {
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
)
)}
)}
</tbody>
</table>
@@ -254,16 +254,17 @@ function Table({ columns, data }) {
</thead>
<tbody {...getTableBodyProps()}>
{firstPageRows.map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
)
)}
)}
</tbody>
</table>
@@ -80,8 +80,9 @@ function Table({ columns, data }) {
</thead>
<tbody {...getTableBodyProps()}>
{firstPageRows.map(
(row, i) =>
prepareRow(row) || (
(row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
@@ -120,7 +121,7 @@ function Table({ columns, data }) {
)
})}
</tr>
)
)}
)}
</tbody>
</table>
@@ -351,8 +351,9 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
</thead>
<tbody {...getTableBodyProps()}>
{page.map(
row =>
prepareRow(row) || (
row => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
@@ -378,7 +379,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
)
})}
</tr>
)
)}
)}
</tbody>
</table>

0 comments on commit 00f223d

Please sign in to comment.
You can’t perform that action at this time.