2

I need to download some data as a csv but I need to highlight and custom some cells depending on cell value.

I've found this example using "react-csv" but it seems to be using plain simple text and not components with styles. Same thing when Tried using "export-to-csv" library.

Anyone knows how can we create csv with html or react objects as cells? something like this:

const csvData = [
  ["firstname", "lastname", "email"],
  [<span style={{color: "red"}}> Ahmed </span>, "Tomi", "ah@smthing.co.com"],
  ["Raed", <LastNameComponent value={"Labes"}/>, "rl@smthing.co.com"],
  ["Yezzi", "Min l3b", "ymin@cocococo.com"]
];

is that possible? maybe with different libraries?

Edit: as Chris Adams stated below csv is used for raw data so I'll try to find an excel converter. Already tried the likes of react-export-excel but the problem with this package is that it's a fork of react-data-export. So there aren't any issues on the fork and the react-data-export seems like it's not really being maintained. Also getting issues with ExcelFile object import from this library so I'll try to search for a better alternative. Will update.

Edit2: Weirdly enough, most libraries I've found are not maintained. The current most maintained library I've witnessed is SheetJS. Styling is possible only at pro version.

Yahav
  • 146
  • 11

1 Answers1

1

As far as I am aware, CSVs are just raw data, no formatting.

Whatever app you are reading the data into would need to understand your formatting. Your example above contains JSX style formatting, so I guess Excel is out of the question.

You could simply dump the raw data into a CSV and then load that CSV into an Excel xlst which contains the formatting.

If the formatting is decided by React when processing the data (e.g. some business logic rule), then maybe you could find a way to dump to html to include the in-line styles.

Chris Adams
  • 1,376
  • 1
  • 8
  • 15