T
TanStack•2y ago
flat-fuchsia

Simple table issues

Hi all I'm having a terrible go at creating a table. I have a data model that looks like 
{
    id: 'eb4a87e1-a55b-49c3-97b9-72efaae0c868',
    title: 'New Document Group',
    organizationId: 'cdfcc629-097d-43c5-8fd0-21e53116ee19',
    createdBy: null,
    isPublic: false,
    multiDocument: false,
    createdAt: 2024-01-09T23:06:12.010Z,
    updatedAt: 2024-01-09T23:06:12.010Z,
    deletedAt: null,
    documents: [ [Object] ]
  },
{
    id: 'eb4a87e1-a55b-49c3-97b9-72efaae0c868',
    title: 'New Document Group',
    organizationId: 'cdfcc629-097d-43c5-8fd0-21e53116ee19',
    createdBy: null,
    isPublic: false,
    multiDocument: false,
    createdAt: 2024-01-09T23:06:12.010Z,
    updatedAt: 2024-01-09T23:06:12.010Z,
    deletedAt: null,
    documents: [ [Object] ]
  },
and my colum def looks like 
const columns: ColumnDef<GroupWithDocs>[] = [
    columHelper.display({
      id: 'checkbox',
      header: () => <input type="checkbox" />,
      cell: () => <input type="checkbox" />,
    }),
    columHelper.accessor((row) => row.title, {
      id: 'title',
      cell: (props) => props.getValue(),
      header: () => 'Name',
    }),
    columHelper.accessor('createdBy', {
      header: () => 'Created By',
      cell: (props) => props.getValue(),
    }),
    columHelper.accessor('updatedAt', {
      header: () => 'Last Modified',
      cell: (props) => props.getValue(),
    }),
    columHelper.display({
      id: 'favorite',
      cell: (props) => <span>''</span>,
    }),
  ];
const columns: ColumnDef<GroupWithDocs>[] = [
    columHelper.display({
      id: 'checkbox',
      header: () => <input type="checkbox" />,
      cell: () => <input type="checkbox" />,
    }),
    columHelper.accessor((row) => row.title, {
      id: 'title',
      cell: (props) => props.getValue(),
      header: () => 'Name',
    }),
    columHelper.accessor('createdBy', {
      header: () => 'Created By',
      cell: (props) => props.getValue(),
    }),
    columHelper.accessor('updatedAt', {
      header: () => 'Last Modified',
      cell: (props) => props.getValue(),
    }),
    columHelper.display({
      id: 'favorite',
      cell: (props) => <span>''</span>,
    }),
  ];
Now I'm getting all sorts of errors, especially on on the accessor colums. It complains about accessorFn, when I add it it complains about column missing and Im breaking Next with this error Error: Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead. I'm just trying to render a basic table for now, while I get more knowledge but I'm cant even do that. Anyone have an idea as to what could I be possibly doing wrong? TIA
1 Reply
flat-fuchsia
flat-fuchsiaOP•2y ago
This is resolved

Did you find this page helpful?