Fix sub-row data table issues: resolve double indentation, improve selection functionality, and ensure proper TypeScript compilation

Co-authored-by: jacksonkasi1 <109948871+jacksonkasi1@users.noreply.github.com>

Author: Copilot

src/app/(home)/example/ecommerce-orders/data-table/components/columns.tsx

@@ -23,7 +23,7 @@ const baseColumns: ColumnDef<ExportableData>[] = [
         );
       } else {
         return (
-          <div className="pl-6 text-muted-foreground">
+          <div className="text-muted-foreground">
             {String(data.productName || '')}
           </div>
         );
@@ -47,7 +47,7 @@ const baseColumns: ColumnDef<ExportableData>[] = [
       } else {
         const category = String(data.category || '');
         return (
-          <div className="pl-6">
+          <div>
             <Badge className={getCategoryColor(category)}>
               {category}
             </Badge>
@@ -71,7 +71,7 @@ const baseColumns: ColumnDef<ExportableData>[] = [
         );
       } else {
         return (
-          <div className="pl-6 text-muted-foreground">
+          <div className="text-muted-foreground">
             {String(data.brand || '')}
           </div>
         );
@@ -93,7 +93,7 @@ const baseColumns: ColumnDef<ExportableData>[] = [
         );
       } else {
         return (
-          <div className="pl-6 font-mono">
+          <div className="font-mono">
             ${Number(data.price || 0).toFixed(2)} × {Number(data.quantity || 0)}
           </div>
         );

src/app/(home)/example/ecommerce-orders/data-table/utils/config.ts

@@ -20,6 +20,7 @@ export const tableConfig: TableConfig = {
   enableExpanding: true,
   paginateExpandedRows: false,
   filterFromLeafRows: true,
+  subRowIndentPx: 24, // 24px indentation for sub-rows
 };
 
 export const useExportConfig = () => ({

src/app/(home)/example/users-with-sub-rows/data-table/components/columns.tsx

@@ -6,25 +6,23 @@ import { Checkbox } from "@/components/ui/checkbox";
 import type { ExportableData } from "@/components/data-table/utils/export-utils";
 import { withExpandingColumn } from "@/components/data-table/utils/expanding-utils";
 
-const getBaseColumns = (subRowIndentPx: number = 0): ColumnDef<ExportableData>[] => [
+const getBaseColumns = (): ColumnDef<ExportableData>[] => [
   {
     accessorKey: "name",
     header: "Name / Expense",
     cell: ({ row }) => {
       const data = row.original;
       const isUser = 'email' in data && 'department' in data;
-      const depth = row.depth || 0;
-      const indentStyle = depth > 0 && subRowIndentPx > 0 ? { paddingLeft: `${depth * subRowIndentPx}px` } : {};
 
       if (isUser) {
         return (
-          <div className="font-medium" style={indentStyle}>
+          <div className="font-medium">
             {String(data.name || '')}
           </div>
         );
       } else {
         return (
-          <div style={indentStyle}>
+          <div>
             {String(data.expenseName || '')}
           </div>
         );
@@ -100,11 +98,10 @@ const getBaseColumns = (subRowIndentPx: number = 0): ColumnDef<ExportableData>[]
 ];
 
 export const getColumns = (
-  handleRowDeselection: ((rowId: string) => void) | null | undefined,
-  subRowIndentPx: number = 0
+  handleRowDeselection: ((rowId: string) => void) | null | undefined
 ): ColumnDef<ExportableData>[] => {
   // Start with base columns
-  let columns = [...getBaseColumns(subRowIndentPx)];
+  let columns = [...getBaseColumns()];
 
   // Add selection column if row selection is enabled
   if (handleRowDeselection !== null) {

src/app/(home)/example/users-with-sub-rows/data-table/utils/config.ts

@@ -20,6 +20,7 @@ export const tableConfig: TableConfig = {
   enableExpanding: true,
   paginateExpandedRows: false,
   filterFromLeafRows: true,
+  subRowIndentPx: 24, // 24px indentation for sub-rows
 };
 
 export const useExportConfig = () => ({

src/components/data-table/data-table.tsx

@@ -506,16 +506,16 @@ export function DataTable<TData extends ExportableData, TValue>({
   // Get columns with the deselection handler and sub-row support (memoize to avoid recreation on render)
   const columns = useMemo(() => {
     // Only pass deselection handler if row selection is enabled
-    let processedColumns = getColumns(tableConfig.enableRowSelection ? handleRowDeselection : null, tableConfig.subRowIndentPx);
+    let processedColumns = getColumns(tableConfig.enableRowSelection ? handleRowDeselection : null);
 
     // Process columns for sub-row support if configured
     if (subRows) {
-      processedColumns = subRows.processColumns(processedColumns);
+      processedColumns = subRows.processColumns(processedColumns as ColumnDef<TData>[]) as ColumnDef<TData, TValue>[];
     }
 
     // Add expanding column if expanding is enabled
     return withExpandingColumn(processedColumns, tableConfig.enableExpanding || !!effectiveGetSubRows);
-  }, [getColumns, handleRowDeselection, tableConfig.enableRowSelection, tableConfig.enableExpanding, tableConfig.subRowIndentPx, subRows, effectiveGetSubRows]);
+  }, [getColumns, handleRowDeselection, tableConfig.enableRowSelection, tableConfig.enableExpanding, subRows, effectiveGetSubRows]);
 
   // Create event handlers using utility functions
   const handleSortingChange = useCallback(
@@ -700,7 +700,7 @@ export function DataTable<TData extends ExportableData, TValue>({
       manualRows.push(row);
 
       // Check if this row is expanded
-      const isRowExpanded = expandedState[row.id] || expandedState[row.index];
+      const isRowExpanded = (expandedState as any)[row.id] || (expandedState as any)[row.index];
 
       if (isRowExpanded && effectiveGetSubRows) {
         const subRows = effectiveGetSubRows(row.original);
@@ -744,10 +744,10 @@ export function DataTable<TData extends ExportableData, TValue>({
                 // Return cells for the sub-row using the same column structure
                 return columns.map((column, cellIndex) => {
                   const cellValue = (() => {
-                    if (typeof column.accessorKey === 'string') {
-                      return subRowData[column.accessorKey];
+                    if ('accessorKey' in column && typeof column.accessorKey === 'string') {
+                      return (subRowData as any)[column.accessorKey];
                     }
-                    if (typeof column.accessorFn === 'function') {
+                    if ('accessorFn' in column && typeof column.accessorFn === 'function') {
                       return column.accessorFn(subRowData, subIndex);
                     }
                     return undefined;