defeated-apricot

handling nested values

I have an array of objects, they have nested objects insides them, how to handle displaying them in the table, knowing that they for example differ in the number of activeIngredients they have.

type DrugItem = {
 id: string
      createdAt: Date
      updatedAt: Date
      drugID: string
      imageURL: string
      subImagesURL: string[]
      description: string | null
      likesCount: number
      available: boolean
      form: string
      featured: boolean
      dosageInstructionIDs: string[]
      itemsInBatch: number | null
      notes: string[]
      features: string[]
      userIDs: string[]
      activeIngredients: {
          name: string
          strength: {
              amount: string
              per: string
          }
     }[]
    price: {
      item: number
      batch: number
    }
  //  .... and some other fields
}

type DrugItem = {
 id: string
      createdAt: Date
      updatedAt: Date
      drugID: string
      imageURL: string
      subImagesURL: string[]
      description: string | null
      likesCount: number
      available: boolean
      form: string
      featured: boolean
      dosageInstructionIDs: string[]
      itemsInBatch: number | null
      notes: string[]
      features: string[]
      userIDs: string[]
      activeIngredients: {
          name: string
          strength: {
              amount: string
              per: string
          }
     }[]
    price: {
      item: number
      batch: number
    }
  //  .... and some other fields
}

3 Replies

absent-sapphire•14mo ago

This is mentioned in the docs, where you can handling it using dot notation. https://tanstack.com/table/latest/docs/guide/data#deep-keyed-data

Data Guide | TanStack Table Docs

Data Guide Tables start with your data. Your column definitions and rows will depend on the shape of your data. TanStack Table has some TypeScript features that will help you create the rest of your table code with a great type-safe experience. If you set up your data and types correctly, TanStack Table will be able to infer the shape of your ...

absent-sapphire•14mo ago

https://tanstack.com/table/latest/docs/guide/data#nested-sub-row-data

Data Guide | TanStack Table Docs

defeated-apricotOP•14mo ago

but it didn't mention how to handle dynamic number of subrows.

    const defaultColumns: ColumnDef<DrugItem>[] = [
        {
            accessorKey: 'drug.brandName',
            header: () => 'Brand Name'
        },
        {
            accessorKey: 'form',
            header: 'Drug form'
        },
        // TODO
        columnHelper.group({
            header: 'Active Ingredients',
            columns: [
                columnHelper.accessor((row) => row.activeIngredients.map((item) => item.name), {
                    header: 'AI name'
                }),
                columnHelper.accessor(
                    (row) => {
                        return row.activeIngredients.map(
                            (item) => `${item.strength.amount} / ${item.strength.per}\n`
                        );
                    },
                    {
                        header: 'strength'
                    }
                )
            ]
        }),
        columnHelper.group({
            header: 'Price',
            columns: [
                columnHelper.accessor((row) => row.price.item, {
                    header: 'item'
                }),
                columnHelper.accessor((row) => row.price.batch, {
                    header: 'batch'
                })
            ]
        }),
        {
            header: 'Actions'
        }
    ];

    const defaultColumns: ColumnDef<DrugItem>[] = [
        {
            accessorKey: 'drug.brandName',
            header: () => 'Brand Name'
        },
        {
            accessorKey: 'form',
            header: 'Drug form'
        },
        // TODO
        columnHelper.group({
            header: 'Active Ingredients',
            columns: [
                columnHelper.accessor((row) => row.activeIngredients.map((item) => item.name), {
                    header: 'AI name'
                }),
                columnHelper.accessor(
                    (row) => {
                        return row.activeIngredients.map(
                            (item) => `${item.strength.amount} / ${item.strength.per}\n`
                        );
                    },
                    {
                        header: 'strength'
                    }
                )
            ]
        }),
        columnHelper.group({
            header: 'Price',
            columns: [
                columnHelper.accessor((row) => row.price.item, {
                    header: 'item'
                }),
                columnHelper.accessor((row) => row.price.batch, {
                    header: 'batch'
                })
            ]
        }),
        {
            header: 'Actions'
        }
    ];

this almost does what I want, the values are rendered next to each other. but I want each one to be in a sperate field.

Gaming

Programming

handling nested values

Did you find this page helpful?