react-data-table-component-extensions

    1.5.2 • Public • Published

    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ş

    Install

    npm i react-data-table-component-extensions

    DownloadsWeekly Downloads

    2,005

    Version

    1.5.2

    License

    MIT

    Unpacked Size

    33.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • barisates