react-data-table-component-extensions

react-data-table-component-extensions

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

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.

// 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 (
    <DataTableExtensions
      {...tableData}
    >
      <DataTable
        noHeader
        defaultSortField="id"
        defaultSortAsc={false}
        pagination
        highlightOnHover
      />
    </DataTableExtensions>
  );
}

export default App;

// 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 => <span>{d.genres.join(', ')}</span>,
  },
  {
    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	no	[ ]	Table data
filter	bool	no	true	Enable input filter
filterPlaceholder	string	no	Filter Table	Default placeholder for the filter field
filterHidden	bool	no	true	Filter hidden fields
export	bool	no	true	Enable export button
print	bool	no	true	Enable print button
exportHeaders	bool	no	false	Exports data with table headers
filterDigit	number	no	2	Number of digts to use in search.
fileName	string	no	document.title	Set exported csv and excel file name

Column Properties

Property	Type	Required	Description
cellExport	func	no	Export configuration row => ({Title: row.Title, Example: row.Example})

Author

Barış Ateş

• http://barisates.com
• github/barisates