react-data-table-component-extensions

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

Stats

StarsIssuesVersionUpdatedCreatedSize
react-data-table-component-extensions
2661.5.2a year ago2 years agoMinified + gzip package size for react-data-table-component-extensions in KB

Readme

react-data-table-component-extensions

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

npm package Build Status Dependencies Status Package Size

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.

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
Column Properties
Property Type Required Description
cellExport func no Export configuration row => ({Title: row.Title, Example: row.Example})

Author

Barış Ateş

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.