react-data-table-component-extensions

Export table data as a CSV or Excel file, filter and print the data.

[![npm package][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Dependencies Status][david-image]][david-url]
[![Package Size][bundlephobia-image]][bundlephobia-url]

Getting started

#### Install with NPM:

Install the data-table component first,
``
$ npm install react-data-table-component styled-components
`

then install the data-table-extensions extension.
`
$ npm install react-data-table-component-extensions
`

#### Usage

Live Demo CodeSandbox


##### Features
- Export the file in \.csv and \.xls format.
- Print the table data.
- Filter table data by all columns.
- Filter table by digit length. Default value is 2.

#### Example
Example of filtering table data and export, print buttons.

!Default Theme

`jsx
// App.js
import React from 'react';
import DataTable from 'react-data-table-component';
import DataTableExtensions from 'react-data-table-component-extensions';
import 'react-data-table-component-extensions/dist/index.css';
import { columns, data } from './Data.js';

function App() {
const tableData = {
columns,
data,
};

return (
{...tableData}
>
noHeader
defaultSortField="id"
defaultSortAsc={false}
pagination
highlightOnHover
/>

);
}

export default App;
`
`jsx
// Data.js
export const columns = [
{
name: 'Title',
selector: 'title',
sortable: true,
},
{
name: 'Director',
selector: 'director',
sortable: true,
},
{
name: 'Genres',
selector: 'genres',
sortable: true,
cell: d => {d.genres.join(', ')},
},
{
name: 'Year',
selector: 'year',
sortable: true,
},
];

export const data = [
{
title: 'Beetlejuice',
year: '1988',
genres: [
'Comedy',
'Fantasy',
],
director: 'Tim Burton',
},
{
id: 2,
title: 'The Cotton Club',
year: '1984',
runtime: '127',
genres: [
'Crime',
'Drama',
'Music',
],
director: 'Francis Ford Coppola',
}];
`
#### Properties

Descriptions and configuration settings for component properties.

| Property | Type | Required | Default | Description |
|--------------------------|---------------------|----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| columns | array | yes | [ ] | Table column configuration |
| data | array