@cratis/scene.primereact 1.1.0 → 3.0.0

package/button/SplitButton.tsx

@@ -0,0 +1,135 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { HTMLAttributes } from 'react';
+import { Button } from 'primereact/button';
+import { Popover } from 'primereact/popover';
+import { MenuItem } from '../MenuItem';
+
+/**
+ * Configuration for {@link SplitButton}.
+ */
+export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onClick' | 'children'> {
+    /**
+     * The text on the primary half. This is the action the control is named after - the one a reader
+     * takes without opening anything.
+     */
+    label?: string;
+
+    /**
+     * An icon class shown before the label on the primary half.
+     */
+    icon?: string;
+
+    /**
+     * The secondary actions, shown when the dropdown half is opened. Empty means there are none, and the
+     * dropdown half is left off entirely rather than rendered as a control that opens onto nothing.
+     */
+    items?: MenuItem[];
+
+    /**
+     * Whether both halves are unavailable. There is no way to disable only one: a split button with a
+     * dead primary action is a menu wearing the wrong shape.
+     */
+    disabled?: boolean;
+
+    /**
+     * The PrimeReact severity to tint both halves with, so the two read as one control.
+     */
+    severity?: string;
+
+    /**
+     * Invoked when the primary half is pressed. Named apart from the DOM `onClick` this component would
+     * otherwise inherit, because the two are different questions - "was the action taken" against
+     * "was anything in here clicked", including the dropdown toggle.
+     */
+    onAction?: () => void;
+}
+
+/**
+ * One row of the dropdown menu.
+ *
+ * Kept apart from the composition below so the three shapes an entry can take - a divider, a link, a
+ * command - are three plain branches rather than nested conditionals inside the JSX. An entry carrying a
+ * `url` becomes a real anchor: it is a navigation, and rendering it as a button would cost the reader the
+ * middle-click, the copy-link and the status bar preview that make a link a link.
+ */
+function SplitButtonItem({ item }: { item: MenuItem }) {
+    const className = 'flex w-full items-center gap-2 border-0 bg-transparent px-3 py-2 text-left no-underline disabled:opacity-50';
+    const content = (
+        <>
+            {item.icon !== undefined && <i className={item.icon} aria-hidden='true' />}
+            {item.label}
+        </>
+    );
+
+    if (item.separator === true) return <li role='separator' className='my-1 border-t' />;
+
+    if (item.url !== undefined) {
+        return (
+            <li role='none'>
+                <a role='menuitem' href={item.url} className={className}>
+                    {content}
+                </a>
+            </li>
+        );
+    }
+
+    return (
+        <li role='none'>
+            <button type='button' role='menuitem' disabled={item.disabled} onClick={item.command} className={className}>
+                {content}
+            </button>
+        </li>
+    );
+}
+
+/**
+ * A primary action with a dropdown of related ones beside it.
+ *
+ * Cratis owns this component. PrimeReact 10 had `SplitButton`; PrimeReact 11 removed it with no
+ * replacement and no headless hook, while `splitButton` remains a name this package's manifest publishes.
+ * It is composed rather than reimplemented: both halves are PrimeReact `Button`s and the menu hangs off a
+ * PrimeReact `Popover`, so the control is themed, positioned, portaled and dismissed by the same machinery
+ * every other overlay in the application uses. What is actually ours is the arrangement and the menu
+ * markup - a `menu` / `menuitem` structure over {@link MenuItem}, which is the part v10 left to chance.
+ *
+ * A dropdown half with nothing behind it is not rendered, so an authored but not-yet-populated item list
+ * degrades to a plain button.
+ *
+ * What it deliberately does not carry over from v10: nested submenus - `items` is read one level deep,
+ * because a split button whose menu has drawers is a menubar and should say so; the `menuButtonProps` /
+ * `buttonProps` escape hatches, which existed to reach past the component and are unnecessary when the
+ * halves are just Buttons; the `loading` state, which v11's Button no longer has; and `appendTo` and
+ * z-index juggling, which the popover's portal makes moot.
+ */
+export function SplitButton({ label, icon, items = [], disabled = false, severity, onAction, className, ...rest }: SplitButtonProps) {
+    return (
+        <span {...rest} className={['inline-flex', className].filter(Boolean).join(' ')}>
+            <Button severity={severity} disabled={disabled} onClick={onAction}>
+                {icon !== undefined && <i className={icon} aria-hidden='true' />}
+                {label}
+            </Button>
+            {items.length > 0 && (
+                <Popover.Root>
+                    <Popover.Trigger as={Button} severity={severity} disabled={disabled} aria-label={label === undefined ? 'More actions' : `More actions for ${label}`}>
+                        <i className='pi pi-chevron-down' aria-hidden='true' />
+                    </Popover.Trigger>
+                    <Popover.Portal>
+                        <Popover.Positioner>
+                            <Popover.Popup>
+                                <Popover.Content>
+                                    <ul role='menu' className='m-0 flex list-none flex-col p-0'>
+                                        {items.map((item, index) => (
+                                            <SplitButtonItem key={index} item={item} />
+                                        ))}
+                                    </ul>
+                                </Popover.Content>
+                            </Popover.Popup>
+                        </Popover.Positioner>
+                    </Popover.Portal>
+                </Popover.Root>
+            )}
+        </span>
+    );
+}

package/button/index.ts

@@ -5,3 +5,4 @@ export * from './PrimeButton';
 export * from './PrimeSplitButton';
 export * from './PrimeSpeedDial';
 export * from './PrimeButtonGroup';
+export * from './SplitButton';

package/data/Column.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { FC, ReactNode } from 'react';
+
+/**
+ * What one column of a table declares about itself.
+ *
+ * This is deliberately the smallest set a table needs to draw a heading and a cell. PrimeReact 10's
+ * `Column` also carried `editor`, `frozen`, `footer`, `colSpan` and `expander`; none of them are carried
+ * over. Editing, frozen panes and footers are table-wide behaviors that a Scene screen has no way to
+ * drive - there is nowhere for an edit to go and nothing to compute a footer from - and `colSpan` and
+ * `expander` only mean anything inside layouts (column groups, nested rows) this package no longer
+ * offers. Re-declaring them here would advertise capabilities the adapters cannot honor.
+ */
+export interface ColumnProps {
+    /**
+     * The row property the column shows. Also the field the table sorts and filters by, which is why a
+     * column without one gets neither: there is nothing to key the operation on.
+     */
+    field?: string;
+
+    /**
+     * The column heading. A column authored with only a field falls back to the field name rather than
+     * rendering blank, so a half-configured table still reads as a table.
+     */
+    header?: string;
+
+    /**
+     * Renders the cell from the whole row instead of from a single field. This is the escape hatch for a
+     * column that shows something derived - two fields joined, a formatted date, a badge - and it is the
+     * one reason a column may sensibly omit `field`.
+     */
+    body?: (row: Record<string, unknown>) => ReactNode;
+
+    /**
+     * Whether clicking the heading sorts by this column.
+     */
+    sortable?: boolean;
+
+    /**
+     * Whether the heading offers an inline filter for this column.
+     */
+    filter?: boolean;
+}
+
+/**
+ * One column of a table - Cratis-owned, because PrimeReact 11 removed `primereact/column` outright.
+ *
+ * In PrimeReact 10 `Column` was a real participant: `DataTable` walked its children, recognized them by
+ * React element type, and rendered the table from their props. PrimeReact 11 replaced that with a
+ * compositional table whose header and body cells the caller writes out itself, so nothing in the library
+ * is left to declare a column with. Cratis Components rebuilt the same `<Column field header body
+ * sortable filter />` authoring model on top of the new table, and this is that same move for Scene: the
+ * component renders nothing on its own and exists only to be read.
+ *
+ * Being a pure declaration is the whole point - it is what lets a column be written where it belongs,
+ * inside the table it configures, without the table having to interpret arbitrary children.
+ */
+export const Column: FC<ColumnProps> = () => null;
+
+Column.displayName = 'Column';

package/data/ColumnDefinition.ts

@@ -2,7 +2,16 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 /**
- * One column of a table, reduced to what PrimeReact's `Column` actually needs to render it.
+ * One column of a table, reduced to what a Scene screen can actually say about it.
+ *
+ * This is the resolved form of {@link ColumnProps} - every field required rather than optional, with the
+ * fallbacks already applied - and it is what {@link columnDefinitions} derives from a table element's
+ * model. The two shapes are deliberately kept assignable so the table renders from either without
+ * caring which one it was handed.
+ *
+ * It stops at `field`, `header` and `sortable` because those are the only three a screen's authored
+ * properties can express. `body` is a function and `filter` needs chrome a screen cannot configure, so
+ * both stay on the declaration side, reachable only when a React caller composes `Column` directly.
  */
 export interface ColumnDefinition {
     /**

package/data/DataGallery.stories.tsx

@@ -38,10 +38,6 @@ export const Gallery: Story = {
             sceneComponent('dataTable', 'dataTable', { rows: [{ id: 1, title: 'Inferred columns' }] }),
             sceneComponent('dataView', 'dataView', { rows: [{ title: 'Kickoff', description: 'Agree the scope' }] }),
             sceneComponent('tree', 'tree', { nodes: [{ label: 'Documents', children: ['Work', 'Home'] }] }),
-            sceneComponent('treeTable', 'treeTable', {
-                columns: [{ field: 'name', header: 'Name' }],
-                nodes: [{ label: 'Root', data: { name: 'Root' }, children: [{ label: 'Child', data: { name: 'Child' } }] }],
-            }),
             sceneComponent('timeline', 'timeline', {
                 events: [{ title: 'Ordered', description: 'Order placed', date: '09:00' }, { title: 'Shipped', description: 'Left the depot', date: '14:20' }],
             }),
@@ -49,7 +45,6 @@ export const Gallery: Story = {
             sceneComponent('orderList', 'orderList', { header: 'Priority', items: ['First', 'Second', 'Third'] }),
             sceneComponent('pickList', 'pickList', { source: ['Alpha', 'Beta'], target: ['Gamma'] }),
             sceneComponent('organizationChart', 'organizationChart', { nodes: [{ label: 'CEO', children: ['CTO', 'CFO'] }] }),
-            sceneComponent('virtualScroller', 'virtualScroller', { items: Array.from({ length: 200 }, (_, index) => `Row ${index + 1}`) }),
         ]),
         registry: primeReactComponents,
         resolveBinding: () => undefined,

package/data/Pagination.tsx

@@ -0,0 +1,82 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Paginator, type PaginatorPagesInstance, type PaginatorRootChangeEvent } from 'primereact/paginator';
+
+/**
+ * How a caller drives {@link Pagination}.
+ */
+export interface PaginationProps {
+    /**
+     * The page being shown, counted from one. PrimeReact 11's paginator is one-based throughout - its
+     * `defaultPage` is `1`, and the page numbers it reports back are the ones it prints - so the adapters
+     * count the same way rather than translating at every edge.
+     */
+    page: number;
+
+    /**
+     * How many records there are in total, across all pages.
+     */
+    total: number;
+
+    /**
+     * How many records fit on a page.
+     */
+    itemsPerPage: number;
+
+    /**
+     * Called with the page the user asked for.
+     */
+    onPageChange: (page: number) => void;
+
+    /**
+     * The Scene element id to tag the rendered paginator with, when the paginator *is* the adapter's
+     * output rather than a part of it.
+     */
+    sceneId?: string;
+}
+
+/**
+ * Page navigation, assembled once from PrimeReact 11's paginator parts.
+ *
+ * PrimeReact 11 ships the paginator as a namespace of parts - a root that owns the page arithmetic and
+ * hands out pre-built button props, and separate first/previous/pages/next/last elements the caller
+ * arranges. That is more expressive than PrimeReact 10's single component, but it is also several dozen
+ * lines that two adapters in this folder would otherwise both write out: the `paginator` component
+ * itself, and `dataView`, which in PrimeReact 11 no longer owns its data and so cannot page it either.
+ * Assembling it here means the two agree on what a paginator looks like.
+ *
+ * The paginator is driven as a controlled component so the caller always knows which page is showing -
+ * `dataView` needs it to slice its rows, and an uncontrolled paginator would keep that inside itself.
+ *
+ * @param props How to drive the paginator.
+ * @returns The paginator.
+ */
+export function Pagination({ page, total, itemsPerPage, onPageChange, sceneId }: PaginationProps) {
+    return (
+        <Paginator.Root
+            data-scene-id={sceneId}
+            page={page}
+            total={total}
+            itemsPerPage={itemsPerPage}
+            onPageChange={(event: PaginatorRootChangeEvent) => onPageChange(event.value)}>
+            <Paginator.Content>
+                <Paginator.First>«</Paginator.First>
+                <Paginator.Prev>‹</Paginator.Prev>
+                <Paginator.Pages>
+                    {(pages: PaginatorPagesInstance) =>
+                        pages.paginator?.pages.map((item, index) =>
+                            item.type === 'page' ? (
+                                <Paginator.Page key={`page-${item.value}`} value={item.value} />
+                            ) : (
+                                <Paginator.Ellipsis key={`ellipsis-${index}`}>…</Paginator.Ellipsis>
+                            )
+                        )
+                    }
+                </Paginator.Pages>
+                <Paginator.Next>›</Paginator.Next>
+                <Paginator.Last>»</Paginator.Last>
+            </Paginator.Content>
+        </Paginator.Root>
+    );
+}

package/data/PrimeColumn.tsx

@@ -1,20 +1,30 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Column } from 'primereact/column';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, stringProperty } from '../properties';
+import { Column } from './Column';
 
 /**
  * The `PrimeReact:column` component - one column of a table.
  *
- * Like PrimeReact's own `Column`, this is configuration rather than output: it renders nothing on its
- * own and only means something inside a table. That is not a Scene quirk - a bare `<Column/>` in
- * PrimeReact renders nothing either. When a `column` element is nested under `dataTable` or `table`,
- * the table reads its `field`, `header` and `sortable` properties off the model rather than using this
- * rendered output; see `columnDefinitions` for why.
+ * This renders {@link Column}, which is Cratis-owned rather than PrimeReact's: PrimeReact 11 removed
+ * `primereact/column` along with the table that walked it. Like its predecessor it is configuration
+ * rather than output - it renders nothing on its own and only means something inside a table - so a bare
+ * `column` on a screen looking blank is the component working, not failing.
+ *
+ * When a `column` element is nested under `dataTable` or `table`, the table reads its properties off the
+ * model rather than off this rendered output; see `columnDefinitions` for why that indirection exists and
+ * why PrimeReact 11 did not change it.
  */
 export function PrimeColumn({ element }: RegisteredComponentProps) {
     const field = stringProperty(element, 'field', '');
-    return <Column field={field} header={stringProperty(element, 'header', field)} sortable={booleanProperty(element, 'sortable', false)} />;
+    return (
+        <Column
+            field={field}
+            header={stringProperty(element, 'header', field)}
+            sortable={booleanProperty(element, 'sortable', false)}
+            filter={booleanProperty(element, 'filter', false)}
+        />
+    );
 }

package/data/PrimeDataTable.tsx

@@ -1,36 +1,131 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { Column } from 'primereact/column';
-import { DataTable } from 'primereact/datatable';
+import { ReactElement, ReactNode, isValidElement } from 'react';
+import { DataTable, type DataTableFilterInstance, type DataTablePaginationInstance, type DataTableTBodyItemOptions } from 'primereact/datatable';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { booleanProperty, numberProperty, recordArrayProperty, stringProperty } from '../properties';
+import { Column, ColumnProps } from './Column';
 import { columnDefinitions } from './columnDefinitions';
 
 /**
  * The `PrimeReact:dataTable` component, also registered under Screenplay's `table` name so a screen
  * compiled from a `.play` file renders through this package without a translation step.
  *
- * Rows come from a `rows` property; columns come from nested `column` children, a `columns` property, or
- * are inferred from the first row - see `columnDefinitions`.
+ * PrimeReact 11 turned the table inside out. Where PrimeReact 10 took `value` and a set of `Column`
+ * children and produced the whole table, PrimeReact 11 gives back a root that owns sorting, filtering and
+ * paging and a set of parts - container, table, head, rows, cells - that the caller arranges. So this
+ * adapter now writes out the table's structure itself, and the column concept it renders from is
+ * {@link Column}, which is Cratis-owned because PrimeReact 11 removed `primereact/column` entirely.
+ *
+ * Columns are taken from `Column` declarations when a React caller composed some into a slot, and
+ * otherwise from the element's model - nested `column` children, a `columns` property, or the shape of
+ * the first row; see `columnDefinitions`. The model is the path a screen takes, and it is checked second
+ * only because an explicitly composed declaration is the more specific statement of the two.
  */
-export function PrimeDataTable({ element }: RegisteredComponentProps) {
+export function PrimeDataTable({ element, slots }: RegisteredComponentProps) {
     const rows = recordArrayProperty(element, 'rows');
-    const columns = columnDefinitions(element, rows);
+    const declared = declaredColumns(slots);
+    const columns: ColumnProps[] = declared.length > 0 ? declared : columnDefinitions(element, rows);
     const pageSize = numberProperty(element, 'pageSize');
+    const size = stringProperty(element, 'size');
+
     return (
-        <DataTable
+        <DataTable.Root
             data-scene-id={element.id}
-            value={rows}
-            emptyMessage={stringProperty(element, 'emptyMessage', 'No records found')}
+            data={rows}
+            removableSort
+            paginator={pageSize !== undefined}
+            rows={pageSize}
             stripedRows={booleanProperty(element, 'stripedRows', false)}
             showGridlines={booleanProperty(element, 'showGridlines', false)}
-            size={stringProperty(element, 'size') as 'small' | 'normal' | 'large' | undefined}
-            paginator={pageSize !== undefined}
-            rows={pageSize}>
-            {columns.map((column) => (
-                <Column key={column.field} field={column.field} header={column.header} sortable={column.sortable} />
-            ))}
-        </DataTable>
+            size={size === 'small' || size === 'large' ? size : undefined}>
+            <DataTable.TableContainer>
+                <DataTable.Table>
+                    <DataTable.THead>
+                        <DataTable.THeadRow>
+                            {columns.map((column, index) => (
+                                <DataTable.THeadCell key={column.field ?? index}>
+                                    {column.sortable && column.field ? (
+                                        <DataTable.Sort field={column.field}>
+                                            {headerOf(column)}
+                                            <DataTable.SortIndicator match='asc'> ▲</DataTable.SortIndicator>
+                                            <DataTable.SortIndicator match='desc'> ▼</DataTable.SortIndicator>
+                                        </DataTable.Sort>
+                                    ) : (
+                                        <span>{headerOf(column)}</span>
+                                    )}
+                                    {column.filter && column.field && (
+                                        <DataTable.Filter field={column.field} display='row'>
+                                            {(filter: DataTableFilterInstance) => (
+                                                <input
+                                                    className='w-full'
+                                                    aria-label={`Filter by ${headerOf(column)}`}
+                                                    value={typeof filter.value === 'string' ? filter.value : ''}
+                                                    onChange={(event) => filter.onChange(event, event.target.value)}
+                                                />
+                                            )}
+                                        </DataTable.Filter>
+                                    )}
+                                </DataTable.THeadCell>
+                            ))}
+                        </DataTable.THeadRow>
+                    </DataTable.THead>
+                    <DataTable.TBody>
+                        {({ item, index }: DataTableTBodyItemOptions) => (
+                            <DataTable.Row index={index}>
+                                {columns.map((column, columnIndex) => (
+                                    <DataTable.Cell key={column.field ?? columnIndex}>{cellOf(column, item)}</DataTable.Cell>
+                                ))}
+                            </DataTable.Row>
+                        )}
+                    </DataTable.TBody>
+                    <DataTable.EmptyTBody>
+                        <DataTable.Row>
+                            <DataTable.Cell colSpan={Math.max(columns.length, 1)}>
+                                {stringProperty(element, 'emptyMessage', 'No records found')}
+                            </DataTable.Cell>
+                        </DataTable.Row>
+                    </DataTable.EmptyTBody>
+                </DataTable.Table>
+            </DataTable.TableContainer>
+            <DataTable.Pagination>
+                {(pagination: DataTablePaginationInstance) => (
+                    <div className='flex items-center gap-2 p-2'>
+                        <button
+                            type='button'
+                            disabled={!pagination.canPrev}
+                            onClick={(event) => pagination.onPageChange(event, pagination.page - 1)}>
+                            ‹
+                        </button>
+                        <span className='text-sm opacity-75'>
+                            {pagination.page + 1} / {Math.max(pagination.pageCount, 1)}
+                        </span>
+                        <button
+                            type='button'
+                            disabled={!pagination.canNext}
+                            onClick={(event) => pagination.onPageChange(event, pagination.page + 1)}>
+                            ›
+                        </button>
+                    </div>
+                )}
+            </DataTable.Pagination>
+        </DataTable.Root>
     );
 }
+
+function declaredColumns(slots: Record<string, ReactNode[]>): ColumnProps[] {
+    return [...(slots.columns ?? []), ...(slots.content ?? [])]
+        .filter((node): node is ReactElement<ColumnProps> => isValidElement(node) && node.type === Column)
+        .map((node) => node.props);
+}
+
+function headerOf(column: ColumnProps): string {
+    return column.header ?? column.field ?? '';
+}
+
+function cellOf(column: ColumnProps, row: Record<string, unknown>): ReactNode {
+    if (column.body !== undefined) return column.body(row);
+    if (column.field === undefined) return '';
+    return String(row[column.field] ?? '');
+}

package/data/PrimeDataView.tsx

@@ -1,34 +1,49 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
+import { useState } from 'react';
 import { DataView } from 'primereact/dataview';
 import { RegisteredComponentProps } from '@cratis/scene.react';
 import { numberProperty, recordArrayProperty, stringProperty } from '../properties';
+import { Pagination } from './Pagination';
 
 /**
  * The `PrimeReact:dataView` component - the same rows a table would show, laid out as a list of cards.
  *
- * DataView has no default item template, so the adapter supplies one built from the `titleField` and
- * `descriptionField` properties. Without it every row would render empty and the component would look
- * broken rather than unconfigured.
+ * PrimeReact 11 reduced `DataView` to a layout shell: a root that tracks nothing but the list/grid
+ * layout, and header, content, empty and footer slots. It no longer takes the rows, so it can no longer
+ * template them, page them, or decide when the list is empty - all three now belong to the caller. The
+ * adapter therefore renders the cards itself from the `titleField` and `descriptionField` properties,
+ * shows the empty slot when there are no rows, and slices the rows for the page the user is on.
+ *
+ * Owning the page locally is the same trade {@link PrimePaginator} makes: a Scene element has nowhere to
+ * record which page is showing, and a preview where paging does nothing would be worse than one where it
+ * works but is forgotten on reload.
  */
 export function PrimeDataView({ element }: RegisteredComponentProps) {
+    const rows = recordArrayProperty(element, 'rows');
     const titleField = stringProperty(element, 'titleField', 'title');
     const descriptionField = stringProperty(element, 'descriptionField', 'description');
     const pageSize = numberProperty(element, 'pageSize');
+    const [page, setPage] = useState(1);
+    const visible = pageSize === undefined ? rows : rows.slice((page - 1) * pageSize, page * pageSize);
+
     return (
-        <DataView
-            data-scene-id={element.id}
-            value={recordArrayProperty(element, 'rows')}
-            emptyMessage={stringProperty(element, 'emptyMessage', 'No records found')}
-            paginator={pageSize !== undefined}
-            rows={pageSize}
-            itemTemplate={(row: Record<string, unknown>) => (
-                <div className='flex flex-col gap-1 p-3'>
-                    <span className='font-semibold'>{String(row[titleField] ?? '')}</span>
-                    <span className='text-sm opacity-75'>{String(row[descriptionField] ?? '')}</span>
-                </div>
+        <DataView.Root data-scene-id={element.id}>
+            <DataView.Content>
+                {visible.map((row, index) => (
+                    <div key={index} className='flex flex-col gap-1 p-3'>
+                        <span className='font-semibold'>{String(row[titleField] ?? '')}</span>
+                        <span className='text-sm opacity-75'>{String(row[descriptionField] ?? '')}</span>
+                    </div>
+                ))}
+            </DataView.Content>
+            {rows.length === 0 && <DataView.Empty>{stringProperty(element, 'emptyMessage', 'No records found')}</DataView.Empty>}
+            {pageSize !== undefined && (
+                <DataView.Footer>
+                    <Pagination page={page} total={rows.length} itemsPerPage={pageSize} onPageChange={setPage} />
+                </DataView.Footer>
             )}
-        />
+        </DataView.Root>
     );
 }