different TypeScript types for subRows

[johnoscott]

How can I declare a different Data type for subRows ? All the examples I have seen use the same type for nested subrows.

In my case I have Projects (parent) which have 1 or more Tasks (children aka subRows).

type Project = {
    _type: 'Project',
    title: string,
    dueDate: Date,
    tasks?: Task[]
} 

export type Task = {
    _type: 'Task',
    title: string
    status: 'Waiting' | 'In Progress' | 'Urgent' | 'On Hold' | 'Done'
    assignee: string
}

and my data type is Project[]

When i declare the React Table using Project as the generic type ...

const table = useReactTable<Discipline>({
    data,
    getSubRows: (projectRow) => projectRow.tasks,  <--- TypeScript error here

... I get a TypeScript error when defining getSubRows :

TS2322: Type '(ProjectRow: Project) => Task[] | undefined' is not assignable to type '(originalRow: Project, index: number) => Project[] | undefined'. 

Type 'Task[] | undefined' is not assignable to type 'Project[] | undefined'. 
Type 'Task[]' is not assignable to type 'Project[]'. 
Type 'Task' is not assignable to type 'Project'. 
Types of property '_type' are incompatible. 

The expected type comes from property 'getSubRows' which is declared here on type 'TableOptions<Project>'

[MilesNorton]

Hey mate, I had issues with this but found a nice solution. Basically you need to create a new table for the inner arrays and then you can use the manual expanding option. The code below uses tailwind for css:

import type { ColumnDef } from "@tanstack/react-table";
import { flexRender } from "@tanstack/react-table";
import { getCoreRowModel, getExpandedRowModel, useReactTable } from "@tanstack/react-table";
import React from "react";

type Project = {
	_type: "Project";
	title: string;
	dueDate: Date;
	tasks?: Task[];
};

type Task = {
	_type: "Task";
	title: string;
	status: "Waiting" | "In Progress" | "Urgent" | "On Hold" | "Done";
	assignee: string;
};

const ExampleTableWithSubRows: React.FC<{ projects: Project[] }> = ({ projects }) => {
	const columns = React.useMemo<ColumnDef<Project>[]>(
		() => [
			{
				header: "Title",
				accessorKey: "title",
				cell: ({ getValue, row }) => {
					return (
						<div className="flex gap-2">
							{row.getCanExpand() && (
								<span
									className={`h-4 w-4 transition-transform ${
										row.getIsExpanded() ? "rotate-90" : "rotate-0"
									}`}
								>
									{">"}
								</span>
							)}{" "}
							{getValue() as string}
						</div>
					);
				},
			},
			{ header: "dueDate", accessorKey: "dueDate" },
		],
		[],
	);

	const headlessTable = useReactTable({
		data: projects || [],
		columns,
		getCoreRowModel: getCoreRowModel(),
		getExpandedRowModel: getExpandedRowModel(),
		enableExpanding: true,
		getRowCanExpand: (row) => !!row.original?.tasks?.length, // check if the sub rows can expand
	});

	return (
		<table className="w-full">
			<thead>
				{headlessTable.getHeaderGroups().map((headerGroup) => (
					<tr key={headerGroup.id}>
						{headerGroup.headers.map((header) => {
							return (
								<th
									key={header.id}
									className={
										"whitespace-nowrap border-b border-gray-400  p-3 text-left text-xs font-semibold"
									}
								>
									{flexRender(header.column.columnDef.header, header.getContext())}
								</th>
							);
						})}
					</tr>
				))}
			</thead>
			<tbody className="divide-y divide-gray-200 bg-white text-xs">
				{headlessTable.getRowModel().rows.map((row) => {
					return (
						<>
							<tr
								key={row.id}
								{...(row.getCanExpand() && {
									onClick: row.getToggleExpandedHandler(),
									style: { cursor: "pointer" },
								})}
							>
								{row.getVisibleCells().map((cell) => {
									return (
										<td
											key={cell.id}
											className={"justify-center whitespace-nowrap p-3 text-left align-middle"}
										>
											{flexRender(cell.column.columnDef.cell, cell.getContext())}
										</td>
									);
								})}
							</tr>
							{row.original.tasks && row.getIsExpanded() && (
								<tr key={row.id + "expansion"}>
									<td colSpan={row.getVisibleCells().length} className="px-5">
										<SubTable tasks={row.original.tasks} />
									</td>
								</tr>
							)}
						</>
					);
				})}
			</tbody>
		</table>
	);
};

const SubTable: React.FC<{ tasks: Task[] }> = ({ tasks }) => {
	const columns = React.useMemo<ColumnDef<Task>[]>(
		() => [
			{ header: "Title", accessorKey: "title" },
			{ header: "Assignee", accessorKey: "assignee" },
			{ header: "Status", accessorKey: "status" },
			{ header: "Type", accessorKey: "_type" },
		],
		[],
	);

	const headlessTable = useReactTable({
		data: tasks || [],
		columns,
		getCoreRowModel: getCoreRowModel(),
	});
	return (
		<table className="w-full">
			<thead>
				{headlessTable.getHeaderGroups().map((headerGroup) => (
					<tr key={headerGroup.id}>
						{headerGroup.headers.map((header) => {
							return (
								<th key={header.id} className={"whitespace-nowrap p-3 text-left text-xs font-semibold"}>
									{flexRender(header.column.columnDef.header, header.getContext())}
								</th>
							);
						})}
					</tr>
				))}
			</thead>
			<tbody className="divide-y divide-gray-200 text-xs">
				{headlessTable.getRowModel().rows.map((row) => {
					return (
						<tr key={row.id}>
							{row.getVisibleCells().map((cell) => {
								return (
									<td key={cell.id} className={"whitespace-nowrap p-3 text-left"}>
										{flexRender(cell.column.columnDef.cell, cell.getContext())}
									</td>
								);
							})}
						</tr>
					);
				})}
			</tbody>
		</table>
	);
};

export default () => {
	return (
		<ExampleTableWithSubRows
			projects={[
				{
					_type: "Project",
					dueDate: new Date(),
					title: "Example sub rows",
					tasks: [{ _type: "Task", assignee: "Ligma", status: "In Progress", title: "TODO" }],
				},
				{ _type: "Project", dueDate: new Date(), title: "Example sub rows" },
			]}
		/>
	);
};

[stychu]

Is this really the solution ? I have the same problem where the type of the getSubRows doesn't match the initial generic type but despite the typescript complaining accessing data by accessor keys from given array works no problem. Its just the type that doesn't match or AM I missing something? It's bit weird to me that the type of the data must be the same as provided initially for the columns ??

@tannerlinsley Would you mind clarifying this and or how to resolve?

//GLOBAL EVENT TYPE
{
  id: string;
  locationId: string;
  branchNumber: number | undefined;
  locationName: string;
  date: string;
  createdBy: string;
  changes: {
    id: string;
    path: string;
    from: string;
    to: string;
  }
  [];
}

'use client';

import { useMemo } from 'react';

import {
  flexRender,
  getCoreRowModel,
  getExpandedRowModel,
  useReactTable,
} from '@tanstack/react-table';

import { api } from '$/lib/trpc/react';
import { cn } from '$/lib/utils';

import type { ColumnDef } from '@tanstack/react-table';
import type { RouterOutputs } from '$/lib/trpc/shared';

type GlobalEvent = RouterOutputs['location']['globalEvents'][0];

const Skeleton = ({ className }: { className?: string }) => (
  <div role="status" className="max-w-sm animate-pulse">
    <div className={cn('h-2.5 bg-gray-300 rounded-full w-48', className)}></div>
  </div>
);

const columns: ColumnDef<GlobalEvent>[] = [
  {
    accessorKey: 'date',
    header: 'Date',
  },
  {
    accessorKey: 'createdBy',
    header: 'User',
  },
  {
    accessorKey: 'locationName',
    header: 'Location',
  },
  {
    accessorKey: 'path',
    header: 'What',
  },
  {
    accessorKey: 'from',
    header: 'From',
  },
  {
    accessorKey: 'to',
    header: 'To',
  },
];

const skeletonColumns = columns.map((col) => ({
  ...col,
  cell: () => <Skeleton />,
}));

export default function ChangeLog() {
  const { data, isLoading } = api.location.globalEvents.useQuery();
  const tableData = useMemo(
    () => (isLoading ? (Array(30).fill({}) as GlobalEvent[]) : data),
    [isLoading, data],
  )!;
  const tableColumns = useMemo(
    () => (isLoading ? skeletonColumns : columns),
    [isLoading],
  );
  const table = useReactTable({
    data: tableData,
    columns: tableColumns,
    state: {
      expanded: true,
    },
    getSubRows: (row) => row.changes,  // <---------- Type '{ id: string; path: string; from: string; to: string; }[]' is not assignable to type '{ id: string; locationId: string; branchNumber: number | undefined; locationName: string; date: string; createdBy: string; changes: { id: string; path: string; from: string; to: string; }[]; }[]'.
    
    getCoreRowModel: getCoreRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
  });

  return (
    <div className="overflow-x-auto max-h-[85vh]">
      <table className="border border-gray-300 text-left w-full table-auto overflow-scroll">
        <thead className="sticky top-0">
          <tr className="">
            {table.getFlatHeaders().map((header) => {
              return (
                <th
                  key={header.id}
                  colSpan={header.colSpan}
                  className="p-3 bg-gray-300 border-r"
                >
                  {flexRender(
                    header.column.columnDef.header,
                    header.getContext(),
                  )}
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody className="divide-y">
          {table.getRowModel().rows.map((row) => (
            <tr
              key={row.id}
              className={cn(
                parseInt(row.id.split('.')[0]!) % 2
                  ? 'bg-gray-100'
                  : 'bg-white',
              )}
            >
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} className="p-3 whitespace-nowrap">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

[javed24]

@stychu did you find a solution for this? I'm in a similar scenario where I need to render some nested rows if a certain row meets some criteria. This nested row will have a different set of columns than the original one, which is why I find the existing example to not be similar to our case here.

[stychu]

@javed24 atm unfortunately no. I just ignored ts for now.. :(

[itshallrun]

Is there a better solution yet?

[delinuxist]

any solution for this?

[tuanacetinkaya]

It's not a definite solution, but we can fake-cast the type to bypass the typescript error.

const table = useReactTable<Discipline>({
    data,
    getSubRows: (projectRow) => projectRow.tasks as unknown as Project // this will change the expected type

unless you need to call getSubRows to get the subRow details, this won't cause any type checking issues.
I would handle all subRow operations using row.original.tasks. I don't know if that's the proper approach.
That worked okay for my project, for now.

[itshallrun]

My solution so far is a union type for the table data, and then a type guard every time I access the data in columns or subRows:

export type TableItem = ItemGroup | LineItem | SubItem;

const columns = useMemo<MRT_ColumnDef<TableItem>[]>(() => [
  {
    header: "Name",
    accessorFn(row: TableItem) {
      //...
      if (isLineItem(row) || isItemGroup(row)) {
        color = "primary";
      } else {
        color = "secondary";
      }
      //...
    },
  },
]);

const tableOptions = {
  ///...
  columns,
  getSubRows: (row: TableItem) => {
    if (isItemGroup(row)) {
      return row.lineItems || undefined;
    }

    if (isLineItem(row)) {
      return row.subItems || undefined;
    }

    if (isSubItem(row)) {
      return undefined;
    }
  },
  //...
};

[irodrigob]

I'm using the shadcn/ui table example. And I've solved the problem by using the "any" option:

The code of the table:

interface DataTableProps<TData, TValue> {
	columns: ColumnDef<TData, TValue>[];
	data: TData[];
	pathSubRows?: string;
}

export function DataTable<TData, TValue>({
	columns,
	data,
	pathSubRows,
}: DataTableProps<TData, TValue>) {
	const [expanded, setExpanded] = useState<ExpandedState>({});
	const table = useReactTable({
		data,
		columns,
		state: {
			expanded,
		},
		getCoreRowModel: getCoreRowModel(),
		onExpandedChange: setExpanded,
		getSubRows: pathSubRows ? (row: any) => row[pathSubRows] : undefined,
		getExpandedRowModel: getExpandedRowModel(),		
	});
//....

What's it called:

<DataTable columns={columns}
		data={userOrders}
		pathSubRows="tasks"
/>

[songhee24]

Is there a better solution yet?

[BrendanC23]

This is a sorely needed feature. I have a data model where customers can have various orders. This results in the following data type:

type Customer = {
    customer_name: string;
    customer_address: string;
    customer_status: string;
    orders: Order[]
};

type Order = {
    order_number: number;
    order_date: Date;
    order_total: number;
    order_paid: string;
}

This means that I have nested sub-rows with a different type than the main row. The expanding docs says:

Expanded rows are essentially child rows that inherit the same column structure as their parent rows. If your data object already includes these expanded rows data, you can utilize the getSubRows function to specify these child rows. However, if your data object does not contain the expanded rows data, they can be treated as custom expanded data, which is discussed in next section.

Instead of a custom expanding UI that is rendered below the main row, I'd like to have nested sub-rows that expand into their own columns. This is something that is doable with Excel's pivot table feature.

Right now, there's not an easy way to accomplish this. One option is to either the customer and order information and treat it as a normal row. However, this causes the customer information to be filled in for every row.

type CombinedData = Omit<Data, "orders"> & Partial<Order>;

const data: Customer[] = [];
const combinedData: CombinedData = [];

for (const row of data) {
    const { orders, ...rest } = row;

    if (!row.orders.length) {
        combinedData.push(rest);
        continue;
    }

    for (const order of orders) {
        combinedData.push({ ...rest, ...order });
    }
}

This works fine, but the customer data is displayed repeatedly for every row.

The alternative is to use getSubRows, though this results in many type errors.

const columns = [
    columnHelper.accessor("customer_name", {
        header: "Customer Name",
    }),
    columnHelper.accessor("customer_address", {
        header: "Customer Address",
    }),
    // Type error because "order_number" does not exist (regular nested data can be accessed with "orders.order_number",
    // but that doesn't work because orders is an array)
    // Argument of type "order_number" is not assignable to parameter of type: ...
    columnHelper.accessor("order_number", {
        header: "Order Number",
    }),
];

const table = useReactTable<Customer>({
    data,
    // Type error because row.orders is not of type Customer
    // Type ... is missing the following properties from type ...
    getSubRows: (row) => row.orders,
});