TanStackT
TanStack•16mo ago
dual-salmon

Aggregating on subRows

I have a use case where the parent row is an aggregation of the child rows. I'm reading the docs on aggregations but I can't find any examples of leaving child rows to render themselves, but aggregate the parent column. As a result, my current accessor is very complicated. e.g.

  columnHelper.accessor((row) => row, {
    id: "profit",
    header: "Profit",
    cell: (info) => {
      let margin = 0;
      if (!("children" in info.getValue())) {
        let high = 0;
        let low = 0;
        if (info.getValue().type === "input") high = info.getValue().high ?? 0;
        else if (info.getValue().type === "output")
          low = info.getValue().low ?? 0;
        margin = calculateMargin(high ?? 0, low ?? 0, info.getValue().id);
      } else {
        margin = calculateRecipeMargin(info.getValue());
      }
      return renderComponent(DataTableCell, {
        class: cn(styleSignedNumberCell(margin), "flex justify-end"),
        value: getSignedPrefix(margin) + formatNumberCell(margin) || "-",
      });
    },
    sortingFn: (a, b) => {
      return (
        calculateRecipeMargin(a.original) - calculateRecipeMargin(b.original)
      );
    },
  }),


As you can see, I have to do conditional checking to see if it's a child row or a parent row and I feel like there must be an easier way to do this. The calculate functions conditionally check if they're a parent or child row by checking the children property.
Was this page helpful?