@wordpress/dataviews 3.0.0 → 4.1.0

package/build-types/field-types/integer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection, ValidationContext, DataFormControlProps } from '../types';
+declare function sort(a: any, b: any, direction: SortDirection): number;
+declare function isValid(value: any, context?: ValidationContext): boolean;
+declare function Edit<Item>({ data, field, onChange, hideLabelFromVision, }: DataFormControlProps<Item>): import("react").JSX.Element;
+declare const _default: {
+    sort: typeof sort;
+    isValid: typeof isValid;
+    Edit: typeof Edit;
+};
+export default _default;
+//# sourceMappingURL=integer.d.ts.map

package/build-types/field-types/integer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integer.d.ts","sourceRoot":"","sources":["../../src/field-types/integer.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EACX,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,UAAU,CAAC;AAElB,iBAAS,IAAI,CAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa,UAEtD;AAED,iBAAS,OAAO,CAAE,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,iBAAiB,WAkBxD;AAED,iBAAS,IAAI,CAAE,IAAI,EAAI,EACtB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,mBAAmB,GACnB,EAAE,oBAAoB,CAAE,IAAI,CAAE,+BAgD9B;;;;;;AAED,wBAIE"}

package/build-types/field-types/text.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection, ValidationContext, DataFormControlProps } from '../types';
+declare function sort(valueA: any, valueB: any, direction: SortDirection): any;
+declare function isValid(value: any, context?: ValidationContext): boolean;
+declare function Edit<Item>({ data, field, onChange, hideLabelFromVision, }: DataFormControlProps<Item>): import("react").JSX.Element;
+declare const _default: {
+    sort: typeof sort;
+    isValid: typeof isValid;
+    Edit: typeof Edit;
+};
+export default _default;
+//# sourceMappingURL=text.d.ts.map

package/build-types/field-types/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/field-types/text.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,OAAO,KAAK,EACX,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,UAAU,CAAC;AAElB,iBAAS,IAAI,CAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa,OAIhE;AAED,iBAAS,OAAO,CAAE,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,iBAAiB,WASxD;AAED,iBAAS,IAAI,CAAE,IAAI,EAAI,EACtB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,mBAAmB,GACnB,EAAE,oBAAoB,CAAE,IAAI,CAAE,+BAkD9B;;;;;;AAED,wBAIE"}

package/build-types/filter-and-sort-data-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-and-sort-data-view.d.ts","sourceRoot":"","sources":["../src/filter-and-sort-data-view.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAQ3C;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAE,IAAI,EAC1C,IAAI,EAAE,IAAI,EAAE,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,KAAK,CAAE,IAAI,CAAE,EAAE,GACrB;IACF,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,cAAc,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3D,CAyIA"}
+{"version":3,"file":"filter-and-sort-data-view.d.ts","sourceRoot":"","sources":["../src/filter-and-sort-data-view.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAQ3C;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CAAE,IAAI,EAC1C,IAAI,EAAE,IAAI,EAAE,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,KAAK,CAAE,IAAI,CAAE,EAAE,GACrB;IACF,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,cAAc,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3D,CA2HA"}

package/build-types/index.d.ts

@@ -1,6 +1,7 @@
-export { default as DataViews } from './dataviews';
-export { VIEW_LAYOUTS } from './layouts';
+export { default as DataViews } from './components/dataviews';
+export { default as DataForm } from './components/dataform';
+export { VIEW_LAYOUTS } from './dataviews-layouts';
 export { filterSortAndPaginate } from './filter-and-sort-data-view';
 export type * from './types';
-export { default as DataForm } from './dataform';
+export { isItemValid } from './validation';
 //# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,mBAAmB,SAAS,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,mBAAmB,SAAS,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}

package/build-types/normalize-fields.d.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import type { Field, NormalizedField } from './types';
 /**
  * Apply default values and normalize the fields config.

package/build-types/normalize-fields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalize-fields.d.ts","sourceRoot":"","sources":["../src/normalize-fields.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,eAAe,EAAc,MAAM,SAAS,CAAC;AAElE;;;;;GAKG;AACH,wBAAgB,eAAe,CAAE,IAAI,EACpC,MAAM,EAAE,KAAK,CAAE,IAAI,CAAE,EAAE,GACrB,eAAe,CAAE,IAAI,CAAE,EAAE,CAa3B"}
+{"version":3,"file":"normalize-fields.d.ts","sourceRoot":"","sources":["../src/normalize-fields.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEtD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAE,IAAI,EACpC,MAAM,EAAE,KAAK,CAAE,IAAI,CAAE,EAAE,GACrB,eAAe,CAAE,IAAI,CAAE,EAAE,CAqD3B"}

package/build-types/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ComponentType, Dispatch, SetStateAction } from 'react';
 /**
  * Internal dependencies
  */
@@ -30,7 +30,10 @@ interface FilterByConfig {
 }
 export type Operator = 'is' | 'isNot' | 'isAny' | 'isNone' | 'isAll' | 'isNotAll';
 export type ItemRecord = Record<string, unknown>;
-export type FieldType = 'text';
+export type FieldType = 'text' | 'integer';
+export type ValidationContext = {
+    elements?: Option[];
+};
 /**
  * A dataview field for a specific property of a data type.
  */
@@ -46,7 +49,11 @@ export type Field<Item> = {
     /**
      * The label of the field. Defaults to the id.
      */
-    header?: string;
+    label?: string;
+    /**
+     * A description of the field.
+     */
+    description?: string;
     /**
      * Placeholder for the field.
      */
@@ -54,21 +61,21 @@ export type Field<Item> = {
     /**
      * Callback used to render the field. Defaults to `field.getValue`.
      */
-    render?: (args: {
+    render?: ComponentType<{
         item: Item;
-    }) => ReactNode;
+    }>;
     /**
-     * The width of the field column.
+     * Callback used to render an edit control for the field.
      */
-    width?: string | number;
+    Edit?: ComponentType<DataFormControlProps<Item>>;
     /**
-     * The minimum width of the field column.
+     * Callback used to sort the field.
      */
-    maxWidth?: string | number;
+    sort?: (a: Item, b: Item, direction: SortDirection) => number;
     /**
-     * The maximum width of the field column.
+     * Callback used to validate the field.
      */
-    minWidth?: string | number;
+    isValid?: (item: Item, context?: ValidationContext) => boolean;
     /**
      * Whether the field is sortable.
      */
@@ -107,13 +114,16 @@ export type Field<Item> = {
     }) => any;
 });
 export type NormalizedField<Item> = Field<Item> & {
-    header: string;
+    label: string;
     getValue: (args: {
         item: Item;
     }) => any;
-    render: (args: {
+    render: ComponentType<{
         item: Item;
-    }) => ReactNode;
+    }>;
+    Edit: ComponentType<DataFormControlProps<Item>>;
+    sort: (a: Item, b: Item, direction: SortDirection) => number;
+    isValid: (item: Item, context?: ValidationContext) => boolean;
 };
 /**
  * A collection of dataview fields for a data type.
@@ -124,7 +134,14 @@ export type Data<Item> = Item[];
  * The form configuration.
  */
 export type Form = {
-    visibleFields?: string[];
+    type?: 'regular' | 'panel';
+    fields?: string[];
+};
+export type DataFormControlProps<Item> = {
+    data: Item;
+    field: NormalizedField<Item>;
+    onChange: Dispatch<SetStateAction<Item>>;
+    hideLabelFromVision?: boolean;
 };
 /**
  * The filters applied to the dataset.
@@ -208,10 +225,36 @@ interface ViewBase {
      */
     perPage?: number;
     /**
-     * The hidden fields.
+     * The fields to render
      */
     fields?: string[];
 }
+export interface CombinedField {
+    id: string;
+    label: string;
+    /**
+     * The fields to use as columns.
+     */
+    children: string[];
+    /**
+     * The direction of the stack.
+     */
+    direction: 'horizontal' | 'vertical';
+}
+export interface ColumnStyle {
+    /**
+     * The width of the field column.
+     */
+    width?: string | number;
+    /**
+     * The minimum width of the field column.
+     */
+    maxWidth?: string | number;
+    /**
+     * The maximum width of the field column.
+     */
+    minWidth?: string | number;
+}
 export interface ViewTable extends ViewBase {
     type: 'table';
     layout?: {
@@ -220,9 +263,13 @@ export interface ViewTable extends ViewBase {
          */
         primaryField?: string;
         /**
-         * The field to use as the media field.
+         * The fields to use as columns.
          */
-        mediaField?: string;
+        combinedFields?: CombinedField[];
+        /**
+         * The styles for the columns.
+         */
+        styles?: Record<string, ColumnStyle>;
     };
 }
 export interface ViewList extends ViewBase {
@@ -333,10 +380,11 @@ export interface ViewBaseProps<Item> {
     getItemId: (item: Item) => string;
     isLoading?: boolean;
     onChangeView: (view: View) => void;
-    onSelectionChange: SetSelection;
+    onChangeSelection: SetSelection;
     selection: string[];
     setOpenedFilter: (fieldId: string) => void;
     view: View;
+    density: number;
 }
 export interface ViewTableProps<Item> extends ViewBaseProps<Item> {
     view: ViewTable;
@@ -353,5 +401,11 @@ export interface SupportedLayouts {
     grid?: Omit<ViewGrid, 'type'>;
     table?: Omit<ViewTable, 'type'>;
 }
+export interface DataFormProps<Item> {
+    data: Item;
+    fields: Field<Item>[];
+    form: Form;
+    onChange: Dispatch<SetStateAction<Item>>;
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/build-types/validation.d.ts

@@ -0,0 +1,3 @@
+import type { Field, Form } from './types';
+export declare function isItemValid<Item>(item: Item, fields: Field<Item>[], form: Form): boolean;
+//# sourceMappingURL=validation.d.ts.map

package/build-types/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../src/validation.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,WAAW,CAAE,IAAI,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,KAAK,CAAE,IAAI,CAAE,EAAE,EACvB,IAAI,EAAE,IAAI,GACR,OAAO,CAOT"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "3.0.0",
+	"version": "4.1.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,16 +28,17 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@ariakit/react": "^0.3.12",
+		"@ariakit/react": "^0.4.7",
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/components": "^28.3.0",
-		"@wordpress/compose": "^7.3.0",
-		"@wordpress/data": "^10.3.0",
-		"@wordpress/element": "^6.3.0",
-		"@wordpress/i18n": "^5.3.0",
-		"@wordpress/icons": "^10.3.0",
-		"@wordpress/primitives": "^4.3.0",
-		"@wordpress/private-apis": "^1.3.0",
+		"@wordpress/components": "^28.5.0",
+		"@wordpress/compose": "^7.5.0",
+		"@wordpress/data": "^10.5.0",
+		"@wordpress/element": "^6.5.0",
+		"@wordpress/i18n": "^5.5.0",
+		"@wordpress/icons": "^10.5.0",
+		"@wordpress/primitives": "^4.5.0",
+		"@wordpress/private-apis": "^1.5.0",
+		"@wordpress/warning": "^3.5.0",
 		"clsx": "^2.1.1",
 		"remove-accents": "^0.5.0"
 	},
@@ -47,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
+	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
 }

package/src/components/dataform/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import type { DataFormProps } from '../../types';
+import { getFormLayout } from '../../dataforms-layouts';
+
+export default function DataForm< Item >( {
+	form,
+	...props
+}: DataFormProps< Item > ) {
+	const layout = getFormLayout( form.type ?? 'regular' );
+	if ( ! layout ) {
+		return null;
+	}
+
+	return <layout.component form={ form } { ...props } />;
+}

package/src/components/dataform/stories/index.story.tsx

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataForm from '../index';
+
+const meta = {
+	title: 'DataViews/DataForm',
+	component: DataForm,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			description:
+				'Chooses the layout of the form. "regular" is the default layout.',
+			options: [ 'regular', 'panel' ],
+		},
+	},
+};
+export default meta;
+
+const fields = [
+	{
+		id: 'title',
+		label: 'Title',
+		type: 'text' as const,
+	},
+	{
+		id: 'order',
+		label: 'Order',
+		type: 'integer' as const,
+	},
+	{
+		id: 'author',
+		label: 'Author',
+		type: 'integer' as const,
+		elements: [
+			{ value: 1, label: 'Jane' },
+			{ value: 2, label: 'John' },
+		],
+	},
+	{
+		id: 'status',
+		label: 'Status',
+		type: 'text' as const,
+		elements: [
+			{ value: 'draft', label: 'Draft' },
+			{ value: 'published', label: 'Published' },
+		],
+	},
+];
+
+export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
+	const [ post, setPost ] = useState( {
+		title: 'Hello, World!',
+		order: 2,
+		author: 1,
+		status: 'draft',
+	} );
+
+	const form = {
+		fields: [ 'title', 'order', 'author', 'status' ],
+	};
+
+	return (
+		<DataForm
+			data={ post }
+			fields={ fields }
+			form={ {
+				...form,
+				type,
+			} }
+			onChange={ setPost }
+		/>
+	);
+};

package/src/components/dataviews/index.tsx

@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { default as DataViewsBulkActions } from '../dataviews-bulk-actions';
+import DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';
+import DataViewsContext from '../dataviews-context';
+import {
+	default as DataViewsFilters,
+	useFilters,
+	FilterVisibilityToggle,
+} from '../dataviews-filters';
+import DataViewsLayout from '../dataviews-layout';
+import DataviewsPagination from '../dataviews-pagination';
+import DataViewsSearch from '../dataviews-search';
+import DataViewsViewConfig from '../dataviews-view-config';
+import { normalizeFields } from '../../normalize-fields';
+import type { Action, Field, View, SupportedLayouts } from '../../types';
+import type { SelectionOrUpdater } from '../../private-types';
+import DensityPicker from '../../dataviews-layouts/grid/density-picker';
+import { LAYOUT_GRID } from '../../constants';
+
+type ItemWithId = { id: string };
+
+type DataViewsProps< Item > = {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: Field< Item >[];
+	search?: boolean;
+	searchLabel?: string;
+	actions?: Action< Item >[];
+	data: Item[];
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	defaultLayouts: SupportedLayouts;
+	selection?: string[];
+	onChangeSelection?: ( items: string[] ) => void;
+	header?: ReactNode;
+} & ( Item extends ItemWithId
+	? { getItemId?: ( item: Item ) => string }
+	: { getItemId: ( item: Item ) => string } );
+
+const defaultGetItemId = ( item: ItemWithId ) => item.id;
+
+export default function DataViews< Item >( {
+	view,
+	onChangeView,
+	fields,
+	search = true,
+	searchLabel = undefined,
+	actions = [],
+	data,
+	getItemId = defaultGetItemId,
+	isLoading = false,
+	paginationInfo,
+	defaultLayouts,
+	selection: selectionProperty,
+	onChangeSelection,
+	header,
+}: DataViewsProps< Item > ) {
+	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const [ density, setDensity ] = useState< number >( 0 );
+	const [ isShowingFilter, setIsShowingFilter ] =
+		useState< boolean >( false );
+	const isUncontrolled =
+		selectionProperty === undefined || onChangeSelection === undefined;
+	const selection = isUncontrolled ? selectionState : selectionProperty;
+	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
+	function setSelectionWithChange( value: SelectionOrUpdater ) {
+		const newValue =
+			typeof value === 'function' ? value( selection ) : value;
+		if ( isUncontrolled ) {
+			setSelectionState( newValue );
+		}
+		if ( onChangeSelection ) {
+			onChangeSelection( newValue );
+		}
+	}
+	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
+	const _selection = useMemo( () => {
+		return selection.filter( ( id ) =>
+			data.some( ( item ) => getItemId( item ) === id )
+		);
+	}, [ selection, data, getItemId ] );
+
+	const filters = useFilters( _fields, view );
+	return (
+		<DataViewsContext.Provider
+			value={ {
+				view,
+				onChangeView,
+				fields: _fields,
+				actions,
+				data,
+				isLoading,
+				paginationInfo,
+				selection: _selection,
+				onChangeSelection: setSelectionWithChange,
+				openedFilter,
+				setOpenedFilter,
+				getItemId,
+				density,
+			} }
+		>
+			<div className="dataviews-wrapper">
+				<HStack
+					alignment="top"
+					justify="start"
+					className="dataviews__view-actions"
+					spacing={ 1 }
+				>
+					<HStack justify="start" wrap>
+						{ search && <DataViewsSearch label={ searchLabel } /> }
+						<FilterVisibilityToggle
+							filters={ filters }
+							view={ view }
+							onChangeView={ onChangeView }
+							setOpenedFilter={ setOpenedFilter }
+							setIsShowingFilter={ setIsShowingFilter }
+							isShowingFilter={ isShowingFilter }
+						/>
+					</HStack>
+					{ view.type === LAYOUT_GRID && (
+						<DensityPicker
+							density={ density }
+							setDensity={ setDensity }
+						/>
+					) }
+					<DataViewsBulkActions />
+					<HStack
+						spacing={ 1 }
+						expanded={ false }
+						style={ { flexShrink: 0 } }
+					>
+						<DataViewsViewConfig
+							defaultLayouts={ defaultLayouts }
+						/>
+						{ header }
+					</HStack>
+				</HStack>
+				{ isShowingFilter && <DataViewsFilters /> }
+				<DataViewsLayout />
+				<DataviewsPagination />
+				<DataViewsBulkActionsToolbar />
+			</div>
+		</DataViewsContext.Provider>
+	);
+}

package/src/{stories → components/dataviews/stories}/fixtures.js

@@ -12,7 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import { LAYOUT_TABLE } from '../constants';
+import { LAYOUT_TABLE } from '../../../constants';
 
 export const data = [
 	{
@@ -160,27 +160,24 @@ export const actions = [
 
 export const fields = [
 	{
-		header: 'Image',
+		label: 'Image',
 		id: 'image',
 		render: ( { item } ) => {
 			return (
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
 			);
 		},
-		width: 50,
 		enableSorting: false,
 	},
 	{
-		header: 'Title',
+		label: 'Title',
 		id: 'title',
-		maxWidth: 400,
 		enableHiding: false,
 		enableGlobalSearch: true,
 	},
 	{
-		header: 'Type',
+		label: 'Type',
 		id: 'type',
-		maxWidth: 400,
 		enableHiding: false,
 		elements: [
 			{ value: 'Not a planet', label: 'Not a planet' },
@@ -190,19 +187,19 @@ export const fields = [
 		],
 	},
 	{
-		header: 'Satellites',
+		label: 'Satellites',
 		id: 'satellites',
+		type: 'integer',
 		enableSorting: true,
 	},
 	{
-		header: 'Description',
+		label: 'Description',
 		id: 'description',
-		maxWidth: 200,
 		enableSorting: false,
 		enableGlobalSearch: true,
 	},
 	{
-		header: 'Categories',
+		label: 'Categories',
 		id: 'categories',
 		elements: [
 			{ value: 'Space', label: 'Space' },