tidesquare-xlsx-merge v1.0.10

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:

Column

Config