T
TanStack•4w ago
sensitive-blue

tanstack table | how can i make one cell update other cells in the same row

hi so i'm trying to figure out how to make one cell's changes affect other cells in the same row with tanstack table, basically i have a SiteSelect component that lets users pick a site, and when they change it, i need the method column in that same row to update too. any examples of code u could share? that would be great since im not too good with these sorts of things, i have other stuff but i want a more general kind of e.g. so i can use it for other use cases too like say i have a drawer i change a value in that component and it also reflects to that row e.g. i can edit the domain in that drawer and it will edit it in the row, cheers 
export const columns = [
    {
      id: 'domain',
      header: 'Domain',
      accessorKey: 'domain',
      cell: ({ row }) =>
        renderComponent(RowIconLabel, {
          image: row.original.site,
          label: row.original.domain,
          shape: 'size-6',
        }),
    },
    {
      id: 'site',
      header: 'Site',
      accessorKey: 'site',
      cell: ({ row }) => {
        const domainId = row.original.id;
        return renderComponent(SiteSelect, {
          site: domainSelections[domainId]?.site || row.original.site,
          method: domainSelections[domainId]?.method || row.original.method,
        });
      },
    },
     {
      id: 'method',
      header: 'Method',
      accessorKey: 'method',
      cell: ({ getValue }) =>
        renderComponent(Badge, {
          children: createRawSnippet(() => ({
            render: () => `<span>${getValue()}</span>`,
          })),
        }),
    }
]
export const columns = [
    {
      id: 'domain',
      header: 'Domain',
      accessorKey: 'domain',
      cell: ({ row }) =>
        renderComponent(RowIconLabel, {
          image: row.original.site,
          label: row.original.domain,
          shape: 'size-6',
        }),
    },
    {
      id: 'site',
      header: 'Site',
      accessorKey: 'site',
      cell: ({ row }) => {
        const domainId = row.original.id;
        return renderComponent(SiteSelect, {
          site: domainSelections[domainId]?.site || row.original.site,
          method: domainSelections[domainId]?.method || row.original.method,
        });
      },
    },
     {
      id: 'method',
      header: 'Method',
      accessorKey: 'method',
      cell: ({ getValue }) =>
        renderComponent(Badge, {
          children: createRawSnippet(() => ({
            render: () => `<span>${getValue()}</span>`,
          })),
        }),
    }
]
1 Reply
sensitive-blue
sensitive-blueOP•4w ago
already flund the fix

Did you find this page helpful?