ExportCSVButton

Reference

• The ExportCSVButton component is a React component designed to export data as a CSV file.
• This component renders a button that allows users to export data in CSV format.
• It formats the data based on the provided headers, date/time formats, and additional attributes before exporting.
• If exporting is disabled (exportDisabled), it shows a disabled button with an ExcelIcon.

Props

1. data: The array of objects to be exported as CSV.
2. headers: Defines the structure of the CSV file, including keys, labels, and formatting options (e.g., attributeType, prefix, suffix).
3. filename: The name of the exported CSV file.
4. attributeFields: Additional metadata for picklist fields to map display names.
5. exportDisabled: A boolean to disable the export button.
6. style: Custom styles for the button.

Usage Example

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { ExportCSVButton } = protrakComponents;
  const {
    data,
    config,
    showDrilldown,
    onClick,
    setShowDrilldown,
    totalData,
    filters,
    typeName,
    sortState,
    onSortApplied,
    typePluralName,
    states,
  } = pageContext;

  
const columns = [
  { key: "DELIVERED Nos", label: "DELIVERED Nos", type: "number" },
  { key: "DELIVERED Cum", label: "DELIVERED Cum", type: "number" },
  { key: "DELIVERED %", label: "DELIVERED %", type: "%" },
  { key: "Stock Nos", label: "Stock Nos", type: "number" },
  { key: "Stock Cum", label: "Stock Cum", type: "number" },
  { key: "ERECTED Nos", label: "ERECTED Nos", type: "number" },
  { key: "ERECTED Cum", label: "ERECTED Cum", type: "number" },
  { key: "ERECTED %", label: "ERECTED %", type: "%" },
  { key: "Stock At Site Nos", label: "Stock At Site Nos", type: "number" },
  { key: "Stock At Site Cum", label: "Stock At Site Cum", type: "number" },
];

  return(
      <ExportCSVButton
        data={data}
        headers={columns}
        filename={typePluralName + "-" + config.name}
        attributeFieldss={config.fields}
      />
  );
};

UI