ammar095

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.