How to handle dynamic types for table rows (columns can be added or removed)

I am implementing tables in react with https://tanstack.com/table/v8. To create tables (and make the most use of v8's ts capabilities), I need to create the table with the column types. This works well when the table has a fixed number of columns with fixed types. However, I am building a table where you can add and remove columns and change their types (similar to Notion tables). So in this case, the type of the columns will be stored in the db and change over time.

In the examples in the docs, we have the following type -

export type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  progress: number
  status: 'relationship' | 'complicated' | 'single'
  subRows?: Person[]
}

export type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  progress: number
  status: 'relationship' | 'complicated' | 'single'
  subRows?: Person[]
}

How can this be constructed from the data in my db and then updated dynamically?

TanStack•4y ago•

1 reply

popular-magenta

How to handle dynamic types for table rows (columns can be added or removed)

export type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  progress: number
  status: 'relationship' | 'complicated' | 'single'
  subRows?: Person[]
}

export type Person = {
  firstName: string
  lastName: string
  age: number
  visits: number
  progress: number
  status: 'relationship' | 'complicated' | 'single'
  subRows?: Person[]
}

How can this be constructed from the data in my db and then updated dynamically?

How to handle dynamic types for table rows (columns can be added or removed)

Similar Threads

How to handle dynamic types for table rows (columns can be added or removed)

Similar Threads

Similar Threads

Similar Threads