T
TanStack•15mo ago
yelping-magenta

how to set colspan from createColumnHelper.

Just started with tanstack table, so far I'm really liking it. But I want to set a colspan of 4 or 5 on the first column of my table. I'm not able to find out how to do this just yet, so wanted to ask. I've tried using "size" in the column, but it doesn't seem to affect colspan, and typescript complains if I try to pass in an arg of colspan 
const columns = [
  columnHelper.accessor('title', {
    id: 'title',
    size: 4,
    header: 'Title',
    cell: (info) => (
     <Text as="u" noOfLines={1} whiteSpace="wrap">
       {info.getValue()}
     ...
 
const table = useReactTable...

<Thead>
  {table.getHeaderGroups().map((headerGroup) => (
    <Tr key={headerGroup.id}>
      {headerGroup.headers.map((header) => (
        <Th key={header.id} colSpan={header.colSpan}
....
const columns = [
  columnHelper.accessor('title', {
    id: 'title',
    size: 4,
    header: 'Title',
    cell: (info) => (
     <Text as="u" noOfLines={1} whiteSpace="wrap">
       {info.getValue()}
     ...
 
const table = useReactTable...

<Thead>
  {table.getHeaderGroups().map((headerGroup) => (
    <Tr key={headerGroup.id}>
      {headerGroup.headers.map((header) => (
        <Th key={header.id} colSpan={header.colSpan}
....
1 Reply
exotic-emerald
exotic-emerald•14mo ago
Great question - colSpan is one of those tricky properties as it's not explicitly declared in the column definitions. Instead it's derived from the structure of your column object hierarchy. See below - the children for the Info and then the More Info columns dictate how many colSpans those headers will occupy. It's also important to note that there is built-in behaviour for placeholder header cells. These are empty cells that fill the unoccupied cells when rendering. The best example to check out is the Kitchen sink - that should give you everything you need: https://tanstack.com/table/latest/docs/framework/react/examples/kitchen-sink In the demo, pay special attention to: - src/components/CustomTable:65 for the placeholder logic. - src/tableModels:78 for the column def. 
columnHelper.accessor('title', {
    id: 'title',
    size: 4,
    header: 'Info',
    footer: props => props.column.id,
    columns: [
      {
        accessorKey: 'age',
        header: () => 'Age',
        footer: props => props.column.id,
      },
      {
        header: 'More Info',
        columns: [
          {
            accessorKey: 'visits',
            header: () => <span>Visits</span>,
            footer: props => props.column.id,
          },
          {
            accessorKey: 'status',
            header: 'Status',
            footer: props => props.column.id,
          },
          {
            accessorKey: 'progress',
            header: 'Profile Progress',
            footer: props => props.column.id,
          },
        ],
      },
    ],
  },
     ...
columnHelper.accessor('title', {
    id: 'title',
    size: 4,
    header: 'Info',
    footer: props => props.column.id,
    columns: [
      {
        accessorKey: 'age',
        header: () => 'Age',
        footer: props => props.column.id,
      },
      {
        header: 'More Info',
        columns: [
          {
            accessorKey: 'visits',
            header: () => <span>Visits</span>,
            footer: props => props.column.id,
          },
          {
            accessorKey: 'status',
            header: 'Status',
            footer: props => props.column.id,
          },
          {
            accessorKey: 'progress',
            header: 'Profile Progress',
            footer: props => props.column.id,
          },
        ],
      },
    ],
  },
     ...
FYI: - the size property is for column width and is consumed when rendering via getSize(): https://tanstack.com/table/latest/docs/api/features/column-sizing#getsize - For full docs on ColumnHelper: https://tanstack.com/table/latest/docs/guide/column-defs#column-helpers

Did you find this page helpful?