manualExpanding Examples?

[gavhuang]

Hi all,

Does anyone have an example of using manualExpanding? I would like to query data for a subrow only if the table row is expanded.

ideally, there would also need to be an initial check to see if the row is able to be expanded in the first place.

[MilovanovM]

Hey guys! Any updates here? I'm ready to give up already playing around with all those manualExpanding, getSubRows, and getRowCanExpand. I don't understand where I should insert the new subrows into the main data.

[Sylar-A]

I did it this way using shadcn/ui components.
Get table function:

export function useBaseTreeServerPaginationTable<TData>(
	data: TData[],
	columns: ColumnDef<TData>[],
	onFilter?: (filter: ColumnFiltersState) => void,
	sortingInit?: SortingState,
	columnFiltersInit?: ColumnFiltersState
) {
	const [sorting, setSorting] = useState<SortingState>(sortingInit || []);
	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
		columnFiltersInit || []
	);
	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
		{}
	);
	const [rowSelection, setRowSelection] = useState({});
	const [pagination, setPagination] = useState<PaginationState>(
		{} as PaginationState
	);
	const [expanded, setExpanded] = React.useState<ExpandedState>({});

	return useReactTable({
		data,
		columns,

		state: {
			sorting,
			columnVisibility,
			rowSelection,
			columnFilters,
			pagination,
			expanded
		},

		onSortingChange: setSorting,
		onColumnVisibilityChange: setColumnVisibility,
		onRowSelectionChange: setRowSelection,
		onPaginationChange: setPagination,
		onExpandedChange: setExpanded,
		onColumnFiltersChange: (updater) => {
			const newValue = functionalUpdate(updater, columnFilters);

			setColumnFilters(newValue);

			onFilter?.(newValue);
		},

		getSubRows: (row) => (row as IHaveChildren<TData>)?.children,
		getRowCanExpand: (row) =>
			(row.original as IHaveChildren<TData>)?.children?.length > 0,

		getCoreRowModel: getCoreRowModel(),
		getFacetedRowModel: getFacetedRowModel(),

		enableRowSelection: true,

		manualSorting: true,

		manualExpanding: true,

		manualFiltering: true,
		enableColumnFilters: true,
		filterFromLeafRows: true,

		manualPagination: true,
		autoResetPageIndex: true,
		paginateExpandedRows: false,

		columnResizeMode: "onChange",
		defaultColumn: {
			enableResizing: true,
			size: 100,
			header: "",
			cell: (info) => info.getValue()
		}
	});
}

IHaveChildren interface is simple:

export interface IHaveChildren<TData> {
	children: TData[];
}

The main is:

export function useBaseTreeServerPaginationTable<TData>(
) {
	const [expanded, setExpanded] = React.useState<ExpandedState>({});

	return useReactTable({
		state: {
			expanded
		},

		onExpandedChange: setExpanded,

		getSubRows: (row) => (row as IHaveChildren<TData>)?.children,
		getRowCanExpand: (row) =>
			(row.original as IHaveChildren<TData>)?.children?.length > 0,

		manualExpanding: true,
	});
}

Table body code:

export default function ApplicationsReportTableBody({
	table,
	columns,
	isLoading
}: Props) {
	return (
		<TableBody>
			{table.getRowModel().rows?.length ? (
				table.getRowModel().rows.map((row) => (
					<>
						<TableRow
							className={
								row.original.children
									? "even:bg-background"
									: "bg-secondary"
							}
							key={row.id}
							data-state={row.getIsSelected() && "selected"}
						>
							{row.getVisibleCells().map((cell) => (
								<TableCell
									key={cell.id}
									style={{ width: cell.column.getSize() }}
									className={cn(
										isLoading
											? "bg-foreground/30 border-foreground/5"
											: ""
									)}
								>
									{flexRender(
										cell.column.columnDef.cell,
										cell.getContext()
									)}
								</TableCell>
							))}
						</TableRow>
						{row.getIsExpanded()
							&& row.subRows.length > 0
							&& row.subRows.map((child) => (
								<TableRow
									className="bg-secondary"
									key={child.id}
								>
									{child.getVisibleCells().map((cell) => (
										<TableCell
											key={cell.id}
											style={{
												width: cell.column.getSize()
											}}
											className={cn(
												isLoading
													? "bg-foreground/30 border-foreground/5"
													: ""
											)}
										>
											{flexRender(
												cell.column.columnDef.cell,
												cell.getContext()
											)}
										</TableCell>
									))}
								</TableRow>
							))
						}
					</>
				))
			) : (
				<TableRow>
					<TableCell
						colSpan={columns.length}
						className="h-20 text-center"
					>
						<div className="text-2xl text-nowrap">
							No data.
						</div>
					</TableCell>
				</TableRow>
			)}
		</TableBody>
	);
}

The main is here:

                                                {row.getIsExpanded()
							&& row.subRows.length > 0
							&& row.subRows.map((child) => (
								<TableRow
									key={child.id}
								>
									{child.getVisibleCells().map((cell) => (
										<TableCell
											key={cell.id}
										>
											{flexRender(
												cell.column.columnDef.cell,
												cell.getContext()
											)}
										</TableCell>
									))}
								</TableRow>
							))
						}

[lianghx-319]

But you did not fetch data when expand a row? How to insert a subRow with good performance?