optimistic-gold

Seeing header but not rows

The code below gives me a table with a header row, but no rows below it with data. I've confirmed that the data variable is populated correctly. Can somebody tell me what I'm missing please?

type Subject = {
    _id: String
    subject: String
    what: {
        description: String
        subtopics: []}
    why: {
        description: String
        subtopics: []}
    how: {
        description: String
        subtopics: []}
}

const columns = [
    {
      header: 'Subject',
      accessorKey: 'subject',
    },
]

function Table(data:Subject[]) {
    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
    }) 
    console.log ("mark")
    console.log (data)

    return (
        <table>
            <thead>
            {table.getHeaderGroups().map(headerGroup => (
                <tr
                key={headerGroup.id}>
                {headerGroup.headers.map(header => (
                    <th key={header.id}>
                        {header.isPlaceholder
                            ? null
                            : flexRender(
                                header.column.columnDef.header,
                                header.getContext()
                            )}
                    </th>
                ))}
                </tr>
            ))}
            </thead>
            <tbody>
            {table.getRowModel().rows.map(row => (
                <tr key={row.id}>
                {row.getVisibleCells().map(cell => (
                    <td key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </td>
                ))}
                </tr>
            ))}
            </tbody>
        </table>
    )
}

type Subject = {
    _id: String
    subject: String
    what: {
        description: String
        subtopics: []}
    why: {
        description: String
        subtopics: []}
    how: {
        description: String
        subtopics: []}
}

const columns = [
    {
      header: 'Subject',
      accessorKey: 'subject',
    },
]

function Table(data:Subject[]) {
    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
    }) 
    console.log ("mark")
    console.log (data)

    return (
        <table>
            <thead>
            {table.getHeaderGroups().map(headerGroup => (
                <tr
                key={headerGroup.id}>
                {headerGroup.headers.map(header => (
                    <th key={header.id}>
                        {header.isPlaceholder
                            ? null
                            : flexRender(
                                header.column.columnDef.header,
                                header.getContext()
                            )}
                    </th>
                ))}
                </tr>
            ))}
            </thead>
            <tbody>
            {table.getRowModel().rows.map(row => (
                <tr key={row.id}>
                {row.getVisibleCells().map(cell => (
                    <td key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </td>
                ))}
                </tr>
            ))}
            </tbody>
        </table>
    )
}

26 Replies

generous-apricot•14mo ago

Are your colDefs and data memoized?

optimistic-goldOP•14mo ago

I don't believe so. Console.log is printing out correct values for data

generous-apricot•14mo ago

Try memoizing your data, and then if that does not do the trick then next the colDefs.

generous-apricot•14mo ago

Found the docs on it: https://tanstack.com/table/latest/docs/guide/data#give-data-a-stable-reference

Data Guide | TanStack Table Docs

Data Guide Tables start with your data. Your column definitions and rows will depend on the shape of your data. TanStack Table has some TypeScript features that will help you create the rest of your table code with a great type-safe experience. If you set up your data and types correctly, TanStack Table will be able to infer the shape of your ...

optimistic-goldOP•14mo ago

Ah. I'm using useState for data, is that the same?

generous-apricot•14mo ago

Yea, that should work.

optimistic-goldOP•14mo ago

colDefs is defined outside the components, so both of them should be stable

generous-apricot•14mo ago

Can you throw this in a stackblitz repro? I could take a look at it. Maybe using the json placeholder api for data or just a faked promise. May only be able to check it tomorrow though (its 1am here in NZ 😅)

optimistic-goldOP•14mo ago

https://react-vmr4gx.stackblitz.io Not sure what to do to handle the imports

generous-apricot•14mo ago

Can you post the link where with the editor in it? this seems to be the preview link. Edit: Share button basically

optimistic-goldOP•14mo ago

https://stackblitz.com/edit/react-vmr4gx?file=src%2FApp.tsx

StackBlitz

React (forked) - StackBlitz

A create-react-app project based on react and react-dom.

optimistic-goldOP•14mo ago

Ok, wait, looks like I need an account Looks like it's working now

generous-apricot•14mo ago

🙌🏼 Cool stuff

optimistic-goldOP•14mo ago

I mean, stackblitz is working My code is not 😂

generous-apricot•14mo ago

LMAO, ok ok ok. Drop the working stackblitz link when ready.

optimistic-goldOP•14mo ago

That

generous-apricot•14mo ago

Your data is undefined

optimistic-goldOP•14mo ago

Ah I only put in the client code, 1 moment

generous-apricot•14mo ago

nvm, I can refactor this to use the json placeholder api

generous-apricot•14mo ago

https://stackblitz.com/edit/react-wukadc?file=src%2FApp.tsx

Sean Cassiere

StackBlitz

React (forked) - StackBlitz

A create-react-app project based on react and react-dom.

generous-apricot•14mo ago

Its working. You should probably validate your server responses. Also, I've adjusted the Table components api so it takes in a named prop as well as setting a default empty array state.

optimistic-goldOP•14mo ago

Wait.. so you're saying you didn't change anything? It's working with the placeholder api?

generous-apricot•14mo ago

No, I made those changes I mentioned. Lemme put some comments marked with IMPORTANT: 📢 updated with the comments. Just search for IMPORTANT:

optimistic-goldOP•14mo ago

Thanks a bunch, I've been banging my head for hours

generous-apricot•14mo ago

Without that default array state, you were sometimes passing in Array<undefined>. Having a named prop catches those kinds of bugs early on. have a good weekend!

optimistic-goldOP•14mo ago

Now to spend a couple hours figuring out what those changes actually did 😂 1st react project here Have a good night!

Gaming

Programming

Seeing header but not rows

Did you find this page helpful?