import { DataViews } from '@wordpress/dataviews';
View on Storybook
View source on GitHub
| Name | Default | Description |
|---|
view Required | | | ViewList
| ViewGrid
| ViewTable
| ViewPickerGrid
| ViewPickerTable
| ViewPickerActivity
| ViewActivity
|
onChangeView Required | | ( view: View ) => void
|
fields Required | | Field< Item >[]
|
search | true | boolean
|
searchLabel | undefined | string
|
actions | [] | Action< Item >[]
|
data Required | | Item[]
|
isLoading | false | boolean
|
paginationInfo Required | | {
totalItems: number;
totalPages: number;
}
|
defaultLayouts | { table: {}, grid: {}, list: {} } | SupportedLayouts
|
selection | | string[]
|
onChangeSelection | | ( items: string[] ) => void
|
onClickItem | | ( item: Item ) => void
|
renderItemLink | | (
props: {
item: Item;
} & ComponentProps< 'a' >
) => ReactElement
|
isItemClickable | () => true | ( item: Item ) => boolean
|
header | | ReactNode
|
getItemLevel | | ( item: Item ) => number
|
children | | ReactNode
|
config | { perPageSizes: [ 10, 20, 50, 100 ] } | {
perPageSizes: number[];
}
|
empty | | ReactNode
|
onReset | | ( () => void ) | false
|
getItemId | ( item: ItemWithId ) => item.id | unknown
|
const LayoutTable = () => <DataViews
containerHeight="auto"
groupBy={false}
groupByLabel
hasClickableItems
perPageSizes={[ 10, 25, 50, 100 ]}
showMedia />;
const LayoutGrid = () => <DataViews
containerHeight="auto"
groupBy={false}
groupByLabel
hasClickableItems
perPageSizes={[ 10, 25, 50, 100 ]}
showMedia />;
const LayoutList = () => <DataViews
containerHeight="auto"
fullWidth={false}
groupBy={false}
groupByLabel
hasClickableItems
perPageSizes={[ 10, 25, 50, 100 ]}
showMedia />;
const LayoutActivity = () => <DataViews
containerHeight="auto"
fullWidth={false}
groupBy={false}
groupByLabel
hasClickableItems
perPageSizes={[ 10, 25, 50, 100 ]}
showMedia />;
const LayoutCustom = () => <DataViews containerHeight="auto" />;
const Empty = () => <DataViews containerHeight="auto" customEmpty={false} isLoading={false} />;
const MinimalUI = () => <DataViews containerHeight="auto" />;
const FreeComposition = () => <DataViews containerHeight="auto" />;
const WithCard = () => <DataViews containerHeight="auto" />;
const InfiniteScroll = () => <DataViews containerHeight="auto" />;