export function MessageTable()

in app/message-table.tsx [80:183]
75 lines of code
7 McCabe index (conditional complexity)

export function MessageTable<TData, TValue>({
  columns,
  data,
  defaultExpanded,
  canHideMessages,
  impressionsThreshold,
}: MessageTableProps<TData, TValue>) {
  // Tables will start collapsed if defaultExpanded is undefined
  const [expanded, setExpanded] = useState<ExpandedState>(
    defaultExpanded || {},
  );
  const table = useReactTable({
    data,
    columns,
    state: {
      expanded,
    },
    onExpandedChange: setExpanded,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getSubRows: (originalRow: any) => originalRow.branches,
    getExpandedRowModel: getExpandedRowModel(),
    filterFromLeafRows: true,
  });

  function getRowSpanForCell(cell: any) {
    // XXX is an experiment & the dates column
    // if (cell.row.original.recipe && cell.column.id == 'dates') {
    //   return cell.row.original.recipe.branches.length
    // }

    return 1;
  }

  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader className="sticky top-36">
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <TableHead
                    className="py-4 bg-stone-100 text-slate-400"
                    key={header.id}
                  >
                    {header.isPlaceholder ? null : (
                      <div className="flex flex-col gap-y-1">
                        {flexRender(
                          header.column.columnDef.header,
                          header.getContext(),
                        )}
                        {header.column.getCanFilter() ? (
                          <Filter
                            column={header.column}
                            impressionsThreshold={impressionsThreshold}
                            canHideMessages={canHideMessages}
                          />
                        ) : null}
                      </div>
                    )}
                  </TableHead>
                );
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <TableRow
                key={row.id}
                data-state={row.getIsSelected() && "selected"}
              >
                {row.getVisibleCells().map((cell) => {
                  // if ((cell.row.original as any).isBranch)
                  //   return ( <></> );
                  return (
                    <TableCell
                      className="py-2"
                      key={cell.id}
                      rowSpan={getRowSpanForCell(cell)}
                    >
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </TableCell>
                  );
                })}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
}