Examples

Here are react-gridsheet examples in demo.

Example1 - Simple example

Project

react-gridsheet-example1/

Source

react-gridsheet-example1/src/App.tsx

  • Cell config:

    • options.cells[column].label: Column label.

    • options.cells[column].width: Column width.

    • options.cells[column].style: Cell style in the column.

Example2 - Custom renderers with dark mode

Project

react-gridsheet-example2/

Source

react-gridsheet-example2/src/App.tsx

  • Dark mode:

    • options.mode = 'dark': Set mode dark

  • API response format:

    • oa2aa(response.data): converts object in array to array in array

  • Custom renderer:

    • IdRenderer: renders a number without comma.

    • ImageRenderer: renders an image related to the string as a link.

    • LinkRenderer: renders a string as a link.

Example3 - Event handling

Project

react-gridsheet-example3/

Source

react-gridsheet-example3/src/App.tsx

  • Custom parser:

    • ListParser: parses a newline delimited string as a (string) list.

  • Feedback functions:

    • onSave: setTsv is set to render TSV.

    • onChange: console.log is set to show the changes.

Example4 - Date reloading

Project

react-gridsheet-example4/

Source

react-gridsheet-example4/src/App.tsx

Would be fixed.

  • The above sheet is test data.

  • The sheet below shows two-factor coverage combinations made from the testdata.

Example5 - Limit width, Resize, Multiple sheets

Project

react-gridsheet-example5/

Source

react-gridsheet-example5/src/App.tsx

  • style and className props will be passed.

    • { maxWidth: "100%"} prevents the sheet exceeding the parent width.

  • options.sheetResize means css resize of the sheet.