@pickk/react-excel v0.0.8

react-excel

A data export library built with and for React.

support file extensions: .xlsx, .csv

1. Getting Started

npm i --save @pickk/react-excel
# or
yarn add @pickk/react-excel

2. Usage

2.1 ExcelDownloadButton

const data = [
    [1,2,3],
    ["a", "b", "c"],
    ["hi", "hello", new Date()],
]

<>
    <ExcelDownloadButton
        fileName="new_excel_file"
        data={data}
    />
    <ExcelDownloadButton
        fileName="new_csv_file"
        data={data}
        options={{ extension: 'csv' }}
    />
</>

ExcelDownloadButton Props

Types

export type FileExtensionType = 'xlsx' | 'csv';
export type CellType = string | number | boolean | Date | object;
export type ExcelFileOptions = {
  isNameHasDateTime?: boolean;
  extension?: FileExtensionType;
};

export type ExcelDownloadButtonProps = {
  fileName: string;
  data: CellType[][];
  options?: ExcelFileOptions;
  style?: React.CSSProperties;
  element?: React.ReactElement;
};

caveat

• It will throw error when sheet data is empty or sheet data has different row length. (Every row must have the same length)

2.2 ExcelFile class

You can generate excel file and download it.

const data = [
  [1, 2, 3],
  ['a', 'b', 'c'],
  ['hi', 'hello', 'bye'],
];

const excelFile = new ExcelFile('new_file', data);
excelFile.download(); // download file as .xlsx by default

excelFile.download('csv'); // download file as .csv by default

constructor

constructor(name: string, data: CellType[][], options?: ExcelFileOptions)

fields

methods

3. Helper

formatTable (helper)

You will probably want to export table data which is composed of columns and rows. So,formatTable helper is provided to get formatted excel data (array of arrays).

const formatTable = <TData = Record<string, unknown>>(
  data: TData[],
  columns: ExcelColumnsType<TData>
): CellType[][];

type MyData = {
  id: number;
  name: { fistName: string; lastName: string };
  address: { country: string; city: string };
};

const data: MyData[] = [
  {
    id: 1234,
    name: { fistName: 'John', lastName: 'Doe' },
    address: { country: 'Spain', city: 'Madrid' },
  },
  {
    id: 5678,
    name: { fistName: 'Jane', lastName: 'Doe' },
    address: { country: 'Korea', city: 'Seoul' },
  },
];

const columns: ExcelColumnsType<MyData> = [
  {
    label: 'ID',
    propName: 'id',
  },
  {
    label: 'NAME',
    propName: 'name',
    mapValue: (record) => `${record.name.fistName} ${record.name.lastName}`,
  },
  {
    label: 'ADDRESS',
    propName: 'address',
    mapValue: (record) =>
      `I live in ${record.address.country}, ${record.address.city}.`,
  },
];

const aoaData = formatTable(data, columns);
/**
 *  aoaData output
 * [
 *    ['ID','NAME','ADDRESS'],
 *    [1234,'John Doe','I live in Spain, Madrid.'],
 *    [5678,'Jane Doe','I live in Korea, Seoul.'],
 * ]
 * /

Types

export type ExcelColumnsType<TData = Record<string, unknown>> = {
  label: string;
  propName: string;
  mapValue?: (record: TData) => CellType;
}[];

4. Links