Cannot get dataview to render items

(@arcwp)

I wanted to try out the @wordpress/dataviews package. I imported @wordpress/dataviews/wp as the docs suggested. I ran into a wide variety of React errors. The relatively simple config found in the various docs scattered all over the place led to React errors.

I found that without paginationInfo and specifically providing an infinite scrolling function callback, this would produce errors. I’m just trying to test out basic grid function, so it’s very frustrating having to cycle through so much config where any mistake might lead to it not functioning.

I eventually got the header of the grid showing with the filter and search bar, but none of the data would show up. I’ve shared the code I ended up with below. I tried dozens of variations and read through all the examples available but of course the docs are scattered and they all contradict each either on what the format of some of the config objects should be.

I suspect the issue is that some type of config is required for layouts? By the way I switched to composition mode as a last ditch effort to get anything remotely working, but most of my testing was with controlled mode.

import { registerBlockType } from '@wordpress/blocks';

import { DataViews } from '@wordpress/dataviews/wp';

import { useState } from '@wordpress/element';

function Edit() {

    const [view, setView] = useState({

        type: 'table',

        perPage: 10,

        page: 1,

    });

    // Dummy function for infiniteScrollHandler

    const infiniteScrollHandler = () => {};

    const data = [

        {

            id: 1,

            title: 'First Post',

            date: '2025-12-01T10:00:00',

            author: 'Alice',

        },

        {

            id: 2,

            title: 'Second Post',

            date: '2025-12-01T12:00:00',

            author: 'Bob',

        },

    ];

    const { __ } = wp.i18n;

    function getFormattedDate(date) {

        // Simple ISO to locale string for demo; replace with your formatting as needed

        return new Date(date).toLocaleString();

    }

    const fields = [

        {

            id: 'title',

            type: 'text',

            label: 'Title',

        },

    ];

    return (

        <DataViews

            data={data}

            fields={fields}

            view={view}

            onChangeView={setView}

            paginationInfo={{

                totalItems: data.length,

                totalPages: 1,

                infiniteScrollHandler,

            }}

            defaultLayouts={{ table: {} }}

        >

            <h1>{ __( 'Free composition' ) }</h1>

            <DataViews.Search />

            <DataViews.FiltersToggle />

            <DataViews.FiltersToggled />

            <DataViews.Layout />

            <DataViews.Pagination />

        </DataViews>

    );

}

function Save() {

    return null;

}

registerBlockType('gateway/dataview', {

    edit: Edit,

    save: Save,

});

Viewing 5 replies - 1 through 5 (of 5 total)

ammar095
(@ammar095)

1 week, 4 days ago
The package is built to work inside the WordPress/Gutenberg environment, not a normal React app.
If you install it in a plain React project, it will throw errors because it depends on internal WordPress data stores, pagination state, and layout registry.

To test basic grid you must:
- Run it inside WP admin or Gutenberg plugin context
- Or wrap it with mock data + required props:
- data
- view
- fields
- paginationInfo and onInfiniteScroll (even if dummy)
If data isn’t showing, it’s because layout isn’t auto-registered unless WordPress provides it.

✅ Minimal working test example inside normal React:

import DataViews from "@wordpress/dataviews/wp"; const dummyData = [ { id: 1, title: "Post One" }, { id: 2, title: "Post Two" }, ]; const fields = [ { id: "title", label: "Title", type: "text" }, ]; export default function Test() { return ( <DataViews data={dummyData} fields={fields} view={{ type: "grid", perPage: 10 }} paginationInfo={{ totalItems: 2, totalPages: 1 }} onInfiniteScroll={() => {}} // dummy function /> ); }

If this still breaks → you’re not in WP context, so the only real fix is:

🔹 Build a small plugin and load it inside WordPress instead of trying to mount it in standalone React.

That’s the whole issue in one line:

Grid works only when WordPress controls layout + stores. In plain React, you must mock pagination & scroll or run it inside WP.
Riad Benguella
(@youknowriad)

1 week, 4 days ago
- DataViews is usable in any React app (even outside WordPress)
- You can pass { totalItems: 2 } to the paginationInfo prop. I don’t think onInfiniteScroll is mandatory. Let me know if that works for you.
- Consider checking the different dataviews stories here. Also check the code for each story, it should be simple enough.
Daniel Brooks
(@aaliash)

1 week, 4 days ago
It looks like the main issue is that DataViews requires a fully-defined layout and field configuration before it can render any rows. Even if you’re using a basic table, the component won’t display data unless each field has the necessary mapping (e.g., getValue or getDisplayValue) and the layout is properly registered.

Right now your fields array only defines the field type and label, but not how the data should be read. For example:
```
const fields = [
{
id: 'title',
type: 'text',
label: 'Title',
getValue: (item) => item.title,
},
{
id: 'date',
type: 'text',
label: 'Date',
getValue: (item) => getFormattedDate(item.date),
},
{
id: 'author',
type: 'text',
label: 'Author',
getValue: (item) => item.author,
},
];
```
Also, make sure your layout is defined like this:

defaultLayouts={{ table: { fields: ['title', 'date', 'author'], }, }}

Once fields + layout are fully specified, the grid should start rendering rows as expected. The pagination callback also needs to exist (as you’ve already added), but it doesn’t have to do anything for static data.

The package is still evolving, and the docs are a bit fragmented, so some of these settings aren’t obvious — but the missing field/value mapping is the reason nothing is showing.
ramonopoly
(@ramonopoly)

1 week, 3 days ago
I ran into a wide variety of React errors

What are the errors?
- This reply was modified 1 week, 3 days ago by ramonopoly.
Thread Starter arcwp
(@arcwp)

1 week, 2 days ago

@ramonopoly I did not take note of them because I was able to work past them. The first one flagged the lack of infinite scroll handler. Different error when layout props were omitted.

Where I eventually left the effort there were no errors, but the data does not load. Filters are visible, but not the data rows.

@aaliash I will try that.