Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aichbauer/react-table-kit
A react table component with custom components and support for sorting, searching, exporting the data...
https://github.com/aichbauer/react-table-kit
component csv data datagrid datatable export grid react search sort table
Last synced: about 2 months ago
JSON representation
A react table component with custom components and support for sorting, searching, exporting the data...
- Host: GitHub
- URL: https://github.com/aichbauer/react-table-kit
- Owner: aichbauer
- License: mit
- Created: 2018-04-24T20:48:03.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-06T16:53:30.000Z (almost 6 years ago)
- Last Synced: 2024-09-16T19:11:15.678Z (4 months ago)
- Topics: component, csv, data, datagrid, datatable, export, grid, react, search, sort, table
- Language: JavaScript
- Size: 854 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-table-kit
[](https://www.npmjs.com/package/react-table-kit)
[](https://travis-ci.org/aichbauer/react-table-kit)
[](https://codecov.io/gh/aichbauer/react-table-kit)
[](https://aichbauer.github.io/react-table-kit)
> A react table component with custom components support and functionality to sort, search, export data, ...
## Table of Contents
* [Documentation](https://aichbauer.github.io/react-table-kit)
* [Why?](#why)
* [Installation](#installation)
* [Components](#components)
* [Usage](#usage)
* [License](#license)
## Why?
Every react table component I found was using its own styling but you couldn't use it with a `css-in-js` library. I wanted to use my own components to style the table without relying on `className` and `css files`. So this library has most of the functionality of the common table components like [react-table]() or [react-bootstrap-table]() but without styling and leaving the option to pass your own components where the styling is up to you. Want to use plain `CSS`, or a `css-in-js library`, no problem, its up to you.
## Installation
```sh
$ npm i react-table-kit -S
```
or
```sh
$ yarn add react-table-kit
```
## Components
Take a look into the [usage section](#usage) for a detailed example.
### Table
> Note: you can also use the default export.
This component renders a table wich has a lot of different functionality.
**Functionality**:
* **custom components**: pass you own components
* **sort** the table by columns
* **search** the table **columns**
* this column includes the searchphrase
* this column is exactly the searchphrase
* **search** the complete **table**
* some column includes the searchphrase
* some column is exactly the searchphrase
* **clickable cells**
* **clickable rows**
* **download** the table content as **CSV** formatted file
#### Syntax
Render a table.
```js
const myTable = (props) => (
);
```
#### Props
* **buttonExportCSV**
* **Type**: element
* **Default**: ``
* **columns**
* **Type**: array of objects - `required`
* **Default**: `[]`
* **data**
* **Type**: array of objects - `required`
* **Default**: `[]`
* **exportCSV**
* **Type**: boolean
* **Default**: `false`
* **inputColumnSearch**
* **Type**: element
* **Default**: ``
* **inputTableSearch**
* **Type**: element
* **Default**: ``
* **noDataMessage**
* **Type**: string
* **Default**: `'No data found'`
* **onClickCell**
* **Type**: function
* **Default**: `(item) => item;`
* **onClickRow**
* **Type**: function
* **Default**: `(item) => item;`
* **table**
* **Type**: element
* **Default**: ``
* **tableSearch**
* **Type**: string
* **Default**: `''`
* **td**
* **Type**: element
* **Default**: ``
* **th**
* **Type**: element
* **Default**: ``
* **trBody**
* **Type**: element
* **Default**: ``
* **trHead**
* **Type**: element
* **Default**: ``
##### Required Props
You need at least data and columns to render a table.
###### data
`data` is an array of objects.
* each object represents one row
* each entry in the object represents one cell in the table
* each object has the same keys
* each key represents a column name
An example of `data`.
```js
const data = [
{
number: 1,
first: 'Mark',
last: 'Otto',
handle: '@mdo',
},
...
];
```
###### columns
`columns` is an array of objects.
* each object holds at least two keys
* **header**: the name of the column
* **accessor**: the way to access the value in the data object
* can be extended by two optional keys
* **sort**: boolean
* **search**: `includes` or `exact`
An example of `columns`.
```js
const columns = [
{
header: '#',
accessor: 'number',
search: 'exact',
sort: true,
},
{
header: 'First',
accessor: 'first',
search: 'exact',
sort: true,
},
{
header: 'Last',
accessor: 'last',
search: 'exact',
sort: true,
},
{
header: 'Handle',
accessor: 'handle',
search: 'exact',
sort: true,
},
];
```
## Usage
An example how to use it. For more detailed information you can take a look at the [documentation](https://aichbauer.github.io/react-table-kit).
```jsx
import React from 'react';
import { Table } from 'react-table-kit';
// use your own components
import { Button } from 'styled-button-component';
import { FormControl } from 'styled-form-component';
import { Table as T, Tr } from 'styled-table-component';
const columns = [
{
header: '#',
accessor: 'number',
search: 'exact',
sort: true,
},
{
header: 'First',
accessor: 'first',
search: 'exact',
sort: true,
},
{
header: 'Last',
accessor: 'last',
search: 'exact',
sort: true,
},
{
header: 'Handle',
accessor: 'handle',
search: 'exact',
sort: true,
},
];
export const data = [
{
number: 1,
first: 'mark',
last: 'otto',
handle: '@mdo',
},
...
]
export const myTable = (props) => (
}
columns={columns}
data={data}
exportCSV={true}
inputColumnSearch={}
inputTableSearch={}
onClickCell={(item) => alert(`"cellValue": "${item}"`)}
onClickRow={(item) => alert(`"rowValue": ${JSON.stringify(item, null, 2)};`)}
table={}
tableSearch="exact"
trBody={}
/>
);
```
## License
MIT © Lukas Aichbauer