React-data-table-component-extensions NPM

react-data-table-component-extensions

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

Getting started

Install with NPM:

$ 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

// 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