Examples#

Here are gridsheet examples in demo.

Note

Example1 - Simple example with formula#

Project:

gridsheet-example1/

Source:

gridsheet-example1/src/App.tsx

  • Support formula

    • Ref

    • Absolute Ref

    • functions

      • custom function

  • Cell config:

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

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

Example2 - Custom renderers with dark mode#

Project:

gridsheet-example2/

Source:

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:

    • ThousandSeparatorRenderer: renders a number with comma. (built-in)

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

    • LinkRenderer: renders a string as a link.

  • Cell label

    • options.labelers: Functions to make label by object.

    • cell.labeler: Name to extract the label function above.

  • Freeze number of columns.

    • options.minNumCols = 5

    • options.maxNumCols = 5

Example3 - Event handling#

Project:

gridsheet-example3/

Source:

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:

gridsheet-example4/

Source:

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:

gridsheet-example5/

Source:

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.

Example6 - Change the data from outside#

Project:

gridsheet-example6/

Source:

gridsheet-example6/src/App.tsx

  • use tableRef

    • tableRef has dispatch and table

    • update table and dispatch it.