# useTableExport

*Category:* Utilities
*Section:* Table & data hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useTableExport
*Captured:* 2026-04-27T14:59:47.834Z

The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.

## useTableExport

### Example: Example 1

Export data

Id

First name

Last name

E-mail

To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.

1

Jeanne

Christiansen

Darla30@yahoo.com

2

Maureen

Yost

Jacquelyn2@gmail.com

3

Jeannie

Kuhlman

Rosamond39@yahoo.com

4

Caleb

Haag

Elvera.Considine@gmail.com

5

Todd

Stroman

Eduardo51@yahoo.com

6

Luis

Toy

Shaylee86@hotmail.com

7

Oda

Quigley

Cordia.Jast@yahoo.com

8

Cesar

Collier

Aditya60@gmail.com

9

Joann

Rau

Addie0@gmail.com

10

Mike

Swift

Otis_Kreiger@hotmail.com

Reorder columns and export the current order.

#### React (tsx)

```tsx
import { useState } from 'react';
import { faker } from '@faker-js/faker';

import Button from '@rio-cloud/rio-uikit/Button';
import Table, { TableBody, TableColumn, TableHeader, TableHeaderColumn, TableRow } from '@rio-cloud/rio-uikit/Table';
import TableToolbar, { TableToolbarColumn } from '@rio-cloud/rio-uikit/TableToolbar';
import useSorting from '@rio-cloud/rio-uikit/useSorting';
import useTableExport from '@rio-cloud/rio-uikit/useTableExport';

type Driver = {
    driverId: string;
    firstName: string;
    lastName: string;
    email: string;
};

type DriverColumnKey = keyof Driver;
type ColumnLabel = { [key in DriverColumnKey]: string };

const columnLabels: ColumnLabel = {
    driverId: 'Id',
    firstName: 'First name',
    lastName: 'Last name',
    email: 'E-mail',
};

const driverList: Driver[] = Array.from({ length: 10 }, (_, index) => ({
    driverId: `${index + 1}`,
    firstName: faker.person.firstName(),
    lastName: faker.person.lastName(),
    email: faker.internet.email(),
}));

const initialColumnOrder: DriverColumnKey[] = ['driverId', 'firstName', 'lastName', 'email'];

const columnWidths: Partial<Record<DriverColumnKey, number>> = {
    driverId: 100,
    firstName: 200,
};

const UseTableExportExample = () => {
    const [columnOrder, setColumnOrder] = useState<DriverColumnKey[]>(initialColumnOrder);
    const { sortedItems, sortKey, sortDirection, setSortKey, setSortDirection } = useSorting(driverList, 'driverId');

    const { exportToCSV } = useTableExport<Driver>();

    const handleTableExport = () => {
        exportToCSV({
            data: sortedItems,
            fileName: 'drivers.csv',
            columns: columnOrder,
            headers: columnLabels,
        });
    };

    const handleSortChange = (columnKey: string, direction: 'asc' | 'desc') => {
        setSortKey(columnKey as DriverColumnKey);
        setSortDirection(direction);
    };

    return (
        <div>
            <TableToolbar>
                <TableToolbarColumn horizontalAlign='right'>
                    <Button iconName='rioglyph-download' onClick={handleTableExport}>
                        Export data
                    </Button>
                </TableToolbarColumn>
            </TableToolbar>

            <Table
                rowKey='driverId'
                hover
                shadow
                sortBy={String(sortKey)}
                sortDirection={sortDirection}
                onSortChange={handleSortChange}
                columnOrder={columnOrder}
                onColumnOrderChange={nextColumnOrder => setColumnOrder(nextColumnOrder as DriverColumnKey[])}
            >
                <TableHeader>
                    {initialColumnOrder.map(column => (
                        <TableHeaderColumn
                            key={column}
                            columnKey={column}
                            sortable
                            draggable
                            width={columnWidths[column]}
                        >
                            {columnLabels[column]}
                        </TableHeaderColumn>
                    ))}
                </TableHeader>
                <TableBody>
                    {sortedItems.map(row => (
                        <TableRow key={row.driverId} id={row.driverId}>
                            {columnOrder.map(column => (
                                <TableColumn key={column} columnKey={column}>
                                    {row[column]}
                                </TableColumn>
                            ))}
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
            <div className='margin-top-25'>Reorder columns and export the current order.</div>
        </div>
    );
};

export default UseTableExportExample;
```

#### HTML (html)

```html
<div>
    <div class="table-toolbar">
        <div class="table-toolbar-container">
            <div class="table-toolbar-group-right">
                <div class="table-toolbar-column align-self-end">
                    <button type="button" class="btn btn-default btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-download">
                        </span>Export data</button>
                </div>
            </div>
        </div>
    </div>
    <div class="table table-view-table table-hover shadow-default border table-rounded table-has-head" role="table" style="--table-columns: minmax(0, 100px) minmax(0, 200px) minmax(50px, 1fr) minmax(50px, 1fr); --table-areas: &quot;table-col-1 table-col-2 table-col-3 table-col-4&quot;; --table-column-count: 4; --table-sticky-reference-top: var(--table-sticky-offset); --table-width: 908px;" aria-colcount="4">
        <div class="table-head" role="rowgroup">
            <div class="table-head-grid" role="row" style="grid-template-rows: repeat(1, auto);">
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="driverId" role="columnheader" aria-colindex="1" aria-rowindex="1" aria-sort="ascending" style="grid-area: 1 / 1 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                    <span class="sort-arrows sort-asc">
                                    </span>
                                    <span class="table-head-label">Id</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="firstName" role="columnheader" aria-colindex="2" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 2 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">First name</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-head-cell-has-column-divider table-align-left table-vertical-align-middle" data-column="lastName" role="columnheader" aria-colindex="3" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 3 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">Last name</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-head-cell table-head-cell-sortable table-head-cell-draggable table-align-left table-vertical-align-middle" data-column="email" role="columnheader" aria-colindex="4" aria-rowindex="1" aria-sort="none" style="grid-area: 1 / 4 / span 1 / span 1; transition: transform linear;">
                    <div class="table-head-cell-content">
                        <div class="table-head-cell-content-row">
                            <button type="button" class="table-head-button">
                                <span class="table-head-button-label table-head-drag-label" tabindex="0" aria-disabled="false" aria-roledescription="sortable" aria-describedby="DndDescribedBy-0">
                                    <span class="sort-arrows ">
                                    </span>
                                    <span class="table-head-label">E-mail</span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="DndDescribedBy-0" style="display: none;">
                    To pick up a draggable item, press the space bar.
                    While dragging, use the arrow keys to move the item.
                    Press space again to drop the item in its new position, or press escape to cancel.
                </div>
                <div id="DndLiveRegion-0" role="status" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(100%); white-space: nowrap;">
                </div>
            </div>
        </div>
        <div class="table-body" role="rowgroup">
            <div id="1" class="table-row" data-index="0" data-row-id="0" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">1</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jeanne</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Christiansen</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Darla30@yahoo.com</div>
                </div>
            </div>
            <div id="2" class="table-row" data-index="1" data-row-id="1" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">2</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Maureen</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Yost</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jacquelyn2@gmail.com</div>
                </div>
            </div>
            <div id="3" class="table-row" data-index="2" data-row-id="2" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">3</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Jeannie</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Kuhlman</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Rosamond39@yahoo.com</div>
                </div>
            </div>
            <div id="4" class="table-row" data-index="3" data-row-id="3" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">4</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Caleb</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Haag</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Elvera.Considine@gmail.com</div>
                </div>
            </div>
            <div id="5" class="table-row" data-index="4" data-row-id="4" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">5</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Todd</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Stroman</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Eduardo51@yahoo.com</div>
                </div>
            </div>
            <div id="6" class="table-row" data-index="5" data-row-id="5" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">6</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Luis</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Toy</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Shaylee86@hotmail.com</div>
                </div>
            </div>
            <div id="7" class="table-row" data-index="6" data-row-id="6" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">7</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Oda</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Quigley</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Cordia.Jast@yahoo.com</div>
                </div>
            </div>
            <div id="8" class="table-row" data-index="7" data-row-id="7" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">8</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Cesar</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Collier</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Aditya60@gmail.com</div>
                </div>
            </div>
            <div id="9" class="table-row" data-index="8" data-row-id="8" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">9</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Joann</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Rau</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Addie0@gmail.com</div>
                </div>
            </div>
            <div id="10" class="table-row" data-index="9" data-row-id="9" role="row">
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="driverId" role="cell" aria-colindex="1" style="grid-area: 1 / 1 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">10</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="firstName" role="cell" aria-colindex="2" style="grid-area: 1 / 2 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Mike</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="lastName" role="cell" aria-colindex="3" style="grid-area: 1 / 3 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Swift</div>
                </div>
                <div class="table-cell table-align-left table-vertical-align-middle" data-column="email" role="cell" aria-colindex="4" style="grid-area: 1 / 4 / span 1 / span 1;">
                    <div class="table-cell-content overflow-hidden">Otis_Kreiger@hotmail.com</div>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-25">Reorder columns and export the current order.</div>
</div>
```

#### Props: Options of the returned `exportToCSV` function

### Options of the returned `exportToCSV` function

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |
| fileName | string | export.csv | Optional name for the exported file. |
| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |
| headers | Partial<Record<keyof T, string>> | — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |
| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use `";"` or `"\t"` for other formats. |
| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |