Core package: xlsx-js-style

Publish Package (using yarn):

1. yarn login
2. yarn build
3. yarn publish

Example

Input

const data = [
  { name: "A", age: 16, mark: 7, province: "Da Nang", district: "Hoang Sa" },
  { name: "B", age: 12, mark: 9.25, province: "Ha Noi", district: "Thanh Xuan" },
  { name: "C", age: 12, mark: 10, province: "Ha Noi", district: "Cau Giay" },
  { name: "D", age: 14, mark: 10, province: "Bac Ninh", district: "Que Vo" },
];

const columns: Column[] = [
  { id: 1, field: "name", title: "Tên", align: 'center', width: 100 },
  { id: 2, field: "age", title: "Tuổi", align: 'right', width: 50, isMerge: true },
  { id: 3, field: "mark", title: "Điểm", type: 'currency', align: 'right', fraction: 1, width: 50 },
  {
    id: 4,
    field: "",
    title: "Địa chỉ",
    children: [
      { id: 41, field: "province", title: "Tỉnh thành", align: 'left', width: 100, isMerge: true },
      { id: 42, field: "district", title: "Quận huyện", align: 'left', width: 100 },
    ],
  },
];

const config: Config = {
  alignKey: 'align',
  widthKey: 'width',
  mergedKey: 'isMerge',
  fractionKey: 'fraction',
  unit: 'wpx',
  widthRate: 1
}

// MyComponent.tsx
const MyComponent = () => {
  const [dataExport, setDataExport] = useState([]);

  const handleConvertData = () => {
    // logic convert data
    const nextData = cloneDeep(data);
    nextData[0].name = 'A-converted';

    setDataExport(nextData);
  }

  return (
    <ExcelExportTSQ
      data={dataExport}
      columns={columns}
      fileName="student"
      config={config}
      mergedFieldCondition="age"
      onLoading={() => console.log("start")}
      onSuccess={() => console.log("end")}
      onEmpty={() => console.log("empty data")}
      onConvert={handleConvertData}
    >
      <CustomButton buttonType="excel" text={text} /> // children
    </ExcelExportTSQ>
  );
}

Result

Demo on stackblitz

ExcelExportTSQ Properties:

| Property | Requiment | Default | Type | Description | | :------- | :-------- | :------ | :----- | ----------- | | data | true | - | object[] | Data record array to be displayed. | | columns | true | - | Column[] | Columns of table. | | fileName | true | - | string | Excel file name (.xlsx). | | config | true | - | Config | Column key mapping to excel fields. | | children | true | - | JSX.Element | Element receives onClick() event. | | onLoading | true | - | function() | Callback executed when children element is clicked. | | onSuccess | true | - | function() | Callback executed when data is exported successfully. | | onEmpty | true | - | function() | Callback executed when empty data. | | onConvert | false | undefined | function() | Callback converted data before export. | | mergedFieldCondition | false | undefined | string | Condition field to merge cell. Ex: orderCode, bookingCode,... |

Column

| Property | Requiment | Default | Type | Description | | :------- | :-------- | :------ | :----- | ----------- | | id | true | - | number | Unique Id. | | field | true | - | string | Field mapping to data. | | title | true | - | string | Header title. | | children | false | undefined | Column[] | Nested Columns. | | type | false | general | currency | date | general | Values type. | | [key: number \| string] | - | - | any | - |

Config

| Property | Requiment | Default | Type | Description | | :------- | :-------- | :------ | :----- | ----------- | | alignKey | true | - | string | Column key mapping to align. Ex: align, textAlign, excelAlgin,... | | mergedKey | true | - | string | Column key mapping to merge. Ex: mergeCell, isMerge,... | | fractionKey | true | - | string | Column key mapping to format float number (number of characters after the comma). Ex: fraction, excelFraction,... | | widthKey | true | - | string | Column key mapping to width. Ex: width, excelWidth,... | | widthRate | false | 1 | number | Ratio of width in excel to that in the original column. | | widthDefault | false | 80 | 14 | number | Width default by unit: wpx: 80, wch: 14. | | unit | false | wpx | wpx | wch | Unit of width. |