T
TanStack•3y ago
protestant-coral

I'm getting this error while creating the column headers.

Uncaught Error: Columns require an id when using a non-string header I'm sure I'm doing something wrong, but not sure what. 
const columns = React.useMemo<ColumnDef<Customer, any>[]>(
  () => [
    {
      columns: [
        {
      id: 'actions',
      header: 'Select',
      cell: (props) => {
        const id = props.row.id.toString();
        const company = props.row.original.company;
        return (
          <input 
                type="checkbox"
                id={`selectCustomer-${id}`}
        name={`selectCustomer-${id}`}
        className={'form-check-input'}
        checked={selectedCustomers.includes(company)}
        onChange={() => toggleSelectedCustomer(company)}
          />
        );
      }
    },
    {
      accessorKey: 'company',
      id: 'company',
      header: 'Company',
      cell: (info) => info.getValue()
      // footer: (info) => info.column.id
    },
    {
      accessorKey: 'street',
      id: 'street',
      header: 'Address',
      cell: (info) => info.getValue()
      // footer: (info) => info.column.id
    },
    {
      accessorKey: 'city',
      id: 'city',
      header: 'City',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    },
    {
      accessorKey: 'state',
      id: 'state',
      header: 'State',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    },
    {
      accessorKey: 'zip',
      id: 'zip',
      header: 'Zip Code',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    },
    {
      accessorKey: 'contact',
      id: 'contact',
      header: 'Contact',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    },
    {
      accessorKey: 'email',
      id: 'email',
      header: 'Email',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    }
      ]
    }
  ],
  []
);
const columns = React.useMemo<ColumnDef<Customer, any>[]>(
  () => [
    {
      columns: [
        {
      id: 'actions',
      header: 'Select',
      cell: (props) => {
        const id = props.row.id.toString();
        const company = props.row.original.company;
        return (
          <input 
                type="checkbox"
                id={`selectCustomer-${id}`}
        name={`selectCustomer-${id}`}
        className={'form-check-input'}
        checked={selectedCustomers.includes(company)}
        onChange={() => toggleSelectedCustomer(company)}
          />
        );
      }
    },
    {
      accessorKey: 'company',
      id: 'company',
      header: 'Company',
      cell: (info) => info.getValue()
      // footer: (info) => info.column.id
    },
    {
      accessorKey: 'street',
      id: 'street',
      header: 'Address',
      cell: (info) => info.getValue()
      // footer: (info) => info.column.id
    },
    {
      accessorKey: 'city',
      id: 'city',
      header: 'City',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    },
    {
      accessorKey: 'state',
      id: 'state',
      header: 'State',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    },
    {
      accessorKey: 'zip',
      id: 'zip',
      header: 'Zip Code',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    },
    {
      accessorKey: 'contact',
      id: 'contact',
      header: 'Contact',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    },
    {
      accessorKey: 'email',
      id: 'email',
      header: 'Email',
      cell: (info) => info.getValue()
      //footer: (info) => info.column.id
    }
      ]
    }
  ],
  []
);
2 Replies
stormy-gold
stormy-gold•3y ago
Did you find an answer for this? Hitting it today and adding an id field to my column object had no effect.
flat-fuchsia
flat-fuchsia•3y ago
It looks like you're putting all your columns in a group. That group column doesn't have an id. If you meant to group all the columns, just give the root column an id. If you didn't, then unwrap them and return an array of columns instead.

Did you find this page helpful?