refactor: TableSettings based on @tanstack/react-table integration from react-science

[tpoisseau]

Unify table usage with TableSettings and TableSection

Closes: #3989

[cloudflare-workers-and-pages]

Deploying nmrium with    Cloudflare Pages

Latest commit:	081fa1e
Status:	✅  Deploy successful!
Preview URL:	https://d8af16c6.nmrium.pages.dev
Branch Preview URL:	https://3989-unify-table-form.nmrium.pages.dev

View logs

[tpoisseau]

Hi, I think this PR is in a good state for a first review.
So I reused the react-science table (based on @tanstack/react-table).

• I set some defaults props (compact, bordered and stickyHearder).
• I implemented tdStyle column metadata with getTdProps (I will implement it directly in react-science if you agree)
• I implemented an empty state, I don't know if it should be implemented in react-science also.
• I added styles to obtain something similar to the nmrium react-table implementation.
• I used the "Title block" tab to check NewTableSettings and implemented reorder by drag n drop with onRowOrderChanged (I used zod validation with codec to add/remove uuid property in my field objects)

@targos @Sebastien-Ahkrin I would have your feedbacks on the look of the table / interactions, and the API itself.
For me createTableColumnHelper<Field>() works way better than the current way to create columns with nmrium react-table.

The API of NewTableSettings is the same than react-science table:

• data and columns mandatory
• onRowOrderChanged and getRowId if you need to support row ordering
• emptyContent and emptyIcon optional

I did not give a try to sort yet, but it should be possible because react-science bind getSortedRowModel: getSortedRowModel() to useReactTable.

[targos]

I implemented tdStyle column metadata with getTdProps (I will implement it directly in react-science if you agree)

SGTM

I implemented an empty state, I don't know if it should be implemented in react-science also.

Probably makes sense to add in react-science