@wordpress/dataviews DataViews, DataViewsPicker, and DataForm components.\nUse for sortable/filterable/paginated admin datasets, item pickers, quick\nedit forms, field and action contracts, server-driven REST queries,\nvalidation, selection, accessibility, and WordPress 7.1 component migrations.\nlicense: GPLv2-or-later\nmetadata:\nwp-skills-author: \"Soczó Kristóf\"\nwp-skills-contact: \"mailto:lonsdale201@hotmail.com\"\nwp-skills-plugin: \"wordpress\"\nwp-skills-plugin-version-tested: \"7.1\"\nwp-skills-wp-version-tested: \"7.1\"\nwp-skills-php-min: \"7.4\"\nwp-skills-last-updated: \"2026-08-20\"Use the public package to build consistent dataset and editing interfaces. It\nrenders UI; it does not fetch, authorize, mutate, paginate, or persist records\nfor you.
\nDataViews: browse, search, filter, sort, paginate, select, and act on items.DataViewsPicker: controlled single- or multi-item selection. It supports\nonly pickerGrid and pickerTable, and has a narrower action contract.DataForm: edit one record or a deliberately composed bulk-edit value.Do not use these components to replace a simple settings field or a tiny static\nlist. Their value starts when fields, views, selection, or actions are reusable.
\nInstall @wordpress/dataviews and, when building with @wordpress/scripts,\nimport from its WordPress entry point:
import { DataForm, DataViews } from '@wordpress/dataviews/wp';\nDo not copy examples that import the package root unchanged into a WordPress\nbuild. The official package explicitly requires /wp for that environment.\nShip the package CSS through the plugin build and declare wp-components as a\ndependency of the plugin stylesheet. Never depend on private exports obtained\nthrough @wordpress/private-apis or code copied from the Site Editor bundle.
const [ view, setView ] = useState( {\n\ttype: 'table',\n\tpage: 1,\n\tperPage: 20,\n\tsearch: '',\n\tfilters: [],\n\tsort: { field: 'title', direction: 'asc' },\n\tfields: [ 'status', 'updated' ],\n} );\n\n<DataViews\n\tdata={ records }\n\tfields={ fields }\n\tview={ view }\n\tonChangeView={ setView }\n\tgetItemId={ ( item ) => String( item.id ) }\n\tpaginationInfo={ { totalItems, totalPages } }\n\tisLoading={ isLoading }\n/>\nThe consumer owns every transition. Convert view.page, perPage, search,\nfilters, and sort into an allowlisted server query, fetch the matching page,\nthen return correct totals. Do not fetch every record and claim server\npagination. Reset or clamp an invalid page when filters reduce the result set.
Every item needs a stable unique ID. The default reads item.id; otherwise pass\ngetItemId. Never use an array index because sorting and pagination make\nselection nondeterministic.
A field is the shared read, sort, filter, render, edit, and validation contract.\nPrefer declared type, label, elements, filterBy, and visibility flags.\nUse getValue/setValue when the stored shape is nested, and custom render\nor Edit only when the built-ins cannot express the behavior.
Rendering a label is not authorization. Treat all returned data as potentially\nsensitive, and escape or render it as React text rather than injecting HTML.\nFor complete field/action shapes and picker restrictions, read\nreferences/contracts-and-security.md.
isEligible and disabled for UX, not security.supportsBulk; handle partial failures and\nreport per-item results rather than pretending the batch was atomic.DataViewsPicker supports callback actions, not RenderModal; it does not\nsupport isEligible. All actions must agree on supportsBulk for multi-select.\nIts selection and onChangeSelection props are required.
const [ edits, setEdits ] = useState( {} );\nconst edited = { ...record, ...edits };\n\n<DataForm\n\tdata={ edited }\n\tfields={ fields }\n\tform={ { layout: { type: 'panel' }, fields: [ 'title', 'status' ] } }\n\tonChange={ ( nextEdits ) => setEdits( ( old ) => ( { ...old, ...nextEdits } ) ) }\n\tvalidity={ validity }\n/>\nonChange receives edits; it does not save them. Run client validation for\nfeedback and authoritative server validation on submit. Preserve unsaved edits\nacross query refreshes deliberately, and clear them only after success or an\nexplicit cancel.
__next40pxDefaultSize; passing false no longer restores 36px.Navigation component is removed; use Navigator.__experimentalApplyValueToSides is removed.View's legacy css prop is a no-op.per_page: -1 workaround as a correctness requirement, and review loops that\nassumed the former accidental ten-item slice.Test empty/loading/error states, one and many pages, filter + sort combinations,\npage shrinkage, duplicate-looking labels with distinct IDs, keyboard-only\nselection, screen-reader labels, unavailable actions, bulk partial failure,\nserver validation, authorization failure, network races, RTL, narrow viewports,\nand reduced motion. Abort or ignore stale responses so a slow old query cannot\noverwrite a newer view.
\nwp-view-config-api for Site Editor view configuration and persistence.wp-rest-api for the server/client boundary.wp-plugin-assets-loading for generated asset files and dependencies.