xenial-black

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

fair-rose•2y ago

Are your colDefs and data memoized?

xenial-blackOP•2y ago

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

fair-rose•2y ago

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

fair-rose•2y 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 ...

xenial-blackOP•2y ago

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

fair-rose•2y ago

Yea, that should work.

xenial-blackOP•2y ago

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

fair-rose•2y 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 😅)

xenial-blackOP•2y ago

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

fair-rose•2y ago

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

xenial-blackOP•2y 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.

xenial-blackOP•2y ago

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

fair-rose•2y ago

🙌🏼 Cool stuff

xenial-blackOP•2y ago

I mean, stackblitz is working My code is not 😂

fair-rose•2y ago

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

xenial-blackOP•2y ago

That

fair-rose•2y ago

Your data is undefined

xenial-blackOP•2y ago

Ah I only put in the client code, 1 moment

fair-rose•2y ago

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

fair-rose•2y 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.

fair-rose•2y 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.

xenial-blackOP•2y ago

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

fair-rose•2y ago

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

xenial-blackOP•2y ago

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

fair-rose•2y 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!

xenial-blackOP•2y 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?