tidesquare-xlsx-merge

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.