Export Table

Download, share, or analyze tabular data

npm run add ExportTable

Use the ExportTable component to allow users to export HTML table data to XLS format with a single click. They:

• Improve productivity: Lets users quickly export data without manual copying.
• Enhances reporting: Makes it easy to share data with stakeholders.
• Easy to integrate: Works with existing HTML tables without requiring complex setup.

<ExportTable
    headings={['ID', 'Name']}
    data={[
        ['1', 'John Doe'],
        ['2', 'Jane Smith'],
        ['3', 'Emily Davis'],
        ['4', 'Frank Williams']
    ]}
/>

Customizing the Export Button

To customize the export button, specify the exportButton prop on the component that accepts an object in the shape of a Button block:

<ExportTable
    headings={['ID', 'Name']}
    data={[ ... ]}
    exportButton={{
        text: 'Export',
        theme: 'secondary'
    }}
/>

Export HTML Tables Programmatically

The component also comes with 3 different utilities that you can use to programmatically create exportable tables. This is useful if you want to completely detach the export functionality from the component. For triggering exports programmatically, you can use the exportTable function:

import { on } from 'webcoreui'
import { exportTable } from './export'

on('button', 'click', () => {
    // Call the function on user interaction with a query selector
    exportTable('#table')
})

The function accepts a valid query selector. The selector can also reference a DOM element. You can also define the exported file name through the second parameter. Make sure to specify the extension as xls:

// Exporting the .my-table element
exportTable('.my-table')

// You can pass a DOM element:
const table = document.querySelector('table')

exportTable(table)

// You can specify the exported file's name:
exportTable('table', 'export.xls')

Add Export Button via JavaScript

The second option to automatically add an “Export” button after your tables is to use the addExport function in the following way:

import { addExport } from './export'

// Once your DOM is loaded and your tables are ready, call the function:
addExport('.my-table')

Note that in this case, the “Export” button will be rendered on the client. Similar to exportTable, addExport expects a valid query selector as the first parameter. The above function will only make the .my-table element exportable. To make all tables on a page exportable, omit the selector, or pass all:

// Both function calls will mark all tables as exportable
addExport()
addExport('all')

The exported file’s name and the “Export” button label can also be configured through the addExport function using the second and third parameters:

// Configure file name
addExport('all', 'my-table.xls')

// Configure file name + button label
addExport('all', 'my-table.xls', 'Download')

By default, the addExport function uses the following defaults:

• selector: 'all'
• file: 'table.xls'
• button: 'Export'

Add Export Button via HTML Attributes

The simplest way to integrate the table export functionality into your application is using the setupExport function. You only need to call this once, then mark your HTML tables with the data-export attribute to make them exportable:

import { setupExport } from './export'

// Call once after your DOM is ready
setupExport()
setupExport('export.xls') // Set default file name
setupExport('export.xls', 'Download') // Set default file name and button text

When using the setupExport function, you’ll need to mark tables as exportable using the data-export attribute:

<table data-export>...</table>

<!-- Set file name for this table --->
<table data-export data-file-name="users.xls">...</table>

<!-- Set button text for this table--->
<table data-export data-button-label="Download">...</table>

The default file name and button text can also be overwritten per table using the data-file-name and data-button-label attributes. The setupExport function default values are table.xls and “Export”.

API

type ExportTableProps = TableProps & {
    exportButton?: ButtonBlockProps
}