quickest-silver

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

correct-apricot•3y ago

Did you find an answer for this? Hitting it today and adding an id field to my column object had no effect.

sensitive-blue•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.

Gaming

Programming

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

Did you find this page helpful?