Skip to content

Latest commit

 

History

History
155 lines (133 loc) · 4.68 KB

README.md

File metadata and controls

155 lines (133 loc) · 4.68 KB
Raw

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

Author

Barış Ateş