Daniel Brooks

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.