Title: Cannot get dataview to render items Last modified: December 2, 2025 --- # Cannot get dataview to render items * [arcwp](https://wordpress.org/support/users/arcwp/) * (@arcwp) * [5 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-get-dataview-to-render-items/) * I wanted to try out the [@wordpress](https://wordpress.org/support/users/wordpress/)/ dataviews package. I imported [@wordpress](https://wordpress.org/support/users/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. * ```wp-block-code 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 (                   

{ __( 'Free composition' ) }

                                                                        );}function Save() {    return null;}registerBlockType('gateway/dataview', {    edit: Edit,    save: Save,}); ``` Viewing 5 replies - 1 through 5 (of 5 total) * [ammar095](https://wordpress.org/support/users/ammar095/) * (@ammar095) * [5 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-get-dataview-to-render-items/#post-18738885) * **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( {}}// 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](https://wordpress.org/support/users/youknowriad/) * (@youknowriad) * [5 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-get-dataview-to-render-items/#post-18739030) - 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](https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs). Also check the code for each story, it should be simple enough. * [Daniel Brooks](https://wordpress.org/support/users/aaliash/) * (@aaliash) * [5 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-get-dataview-to-render-items/#post-18739287) * 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: * ```wp-block-code 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](https://wordpress.org/support/users/ramonopoly/) * (@ramonopoly) * [5 months, 3 weeks ago](https://wordpress.org/support/topic/cannot-get-dataview-to-render-items/#post-18740201) * > I ran into a wide variety of React errors * What are the errors? - This reply was modified 5 months, 3 weeks ago by [ramonopoly](https://wordpress.org/support/users/ramonopoly/). * Thread Starter [arcwp](https://wordpress.org/support/users/arcwp/) * (@arcwp) * [5 months, 2 weeks ago](https://wordpress.org/support/topic/cannot-get-dataview-to-render-items/#post-18743328) * [@ramonopoly](https://wordpress.org/support/users/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](https://wordpress.org/support/users/aaliash/) I will try that. Viewing 5 replies - 1 through 5 (of 5 total) You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcannot-get-dataview-to-render-items%2F%3Foutput_format%3Dmd&locale=en_US) to reply to this topic. ## Tags * [components](https://wordpress.org/support/topic-tag/components/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 5 replies * 5 participants * Last reply from: [arcwp](https://wordpress.org/support/users/arcwp/) * Last activity: [5 months, 2 weeks ago](https://wordpress.org/support/topic/cannot-get-dataview-to-render-items/#post-18743328) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics