• Docs
  • API
  • Help
  • Blog
  • GitHub

›Table Toolkits

Getting Started

  • About
  • Getting Started
  • Bootstrap 4
  • Migration

Basic Usage

  • Work on Row
  • Work on Column
  • Table Sort
  • Row Selection
  • Column Filter
  • Cell Edit
  • Pagination
  • Expandable Row

Remote Table

  • Work on Remote
  • Overlay

Table Toolkits

  • Getting Started
  • Table Search
  • Export to CSV
  • Column Toggle

Exposed API

  • Introduction

Export to CSV

react-bootstrap-table2 support export table data to CSV.

Live Demo For CSV Export
API & Props Definition


Prepare

Please check How to start with table toolkit

Enable Export CSV

import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';

const { ExportCSVButton } = CSVExport;

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  exportCSV
>
  {
    props => (
      <div>
        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
        <hr />
        <BootstrapTable { ...props.baseProps } />
      </div>
    )
  }
</ToolkitProvider>
  • Give exportCSV prop as true on ToolkitProvider.
  • Render ExportCSVButton with csvProps. The position of ExportCSVButton is depends on you.

Customize Export CSV Component

ExportCSVButton is a independent component, it's free to place this component in anywhere, just make sure it is inside of the ToolkitProvider.
You can add any style and className prop on ExportCSVButton for styling it.

However, if you feel ExportCSVButton can not fit your requirement or you want more customization, you can create your own button like following:

// This is my custom csv export component
const MyExportCSV = (props) => {
  const handleClick = () => {
    props.onExport();
  };
  return (
    <div>
      <button className="btn btn-success" onClick={ handleClick }>Click me to export CSV</button>
    </div>
  );
};

export const MyTable = () => (
  <ToolkitProvider
    keyField="id"
    data={ products }
    columns={ columns }
    exportCSV
  >
    {
      props => (
        <div>
          <BootstrapTable { ...props.baseProps } />
          <hr />
          <MyExportCSV { ...props.csvProps } />
        </div>
      )
    }
  </ToolkitProvider>
);

Following, we just explain how it work:

ToolkitProvider will pass a props which have a property called csvProps. csvProps have following properties:

  • onExport: Call this method will trigger export CSV.

In the customization case, you just need to pass csvProps to your component and call csvProps.onExport when export action trigger.

Customize CSV Content

  • Configure column.csvExport to decide if hiden a column when exporting CSV.
  • Configure column.csvType to decide the data type.
  • Configure column.csvFormatter to customize the column when exporting CSV.
  • Configure column.csvText to customize the column header.

CSV Configuration

Please see available exportCSV props.

← Table SearchColumn Toggle →
Docs
Getting StartedAPI References
Community
Stack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 react-bootstrap-table2.