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?