[Experiment POC] DataTable component(pages + templates list)

packages/edit-site/package.json

@@ -27,6 +27,7 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@tanstack/react-table": "^8.9.3",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/block-editor": "file:../block-editor",

packages/edit-site/src/components/datatable/context.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+const DataTableContext = createContext( {} );
+export const useDataTableContext = () => useContext( DataTableContext );
+export default DataTableContext;

packages/edit-site/src/components/datatable/datatable-actions.js

@@ -0,0 +1,180 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	SelectControl,
+	privateApis as componentsPrivateApis,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import {
+	chevronRightSmall,
+	check,
+	blockTable,
+	chevronDown,
+} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { useDataTableContext } from './context';
+
+const {
+	DropdownMenuV2,
+	// DropdownMenuCheckboxItemV2,
+	DropdownMenuGroupV2,
+	DropdownMenuItemV2,
+	// DropdownMenuRadioGroupV2,
+	// DropdownMenuRadioItemV2,
+	// DropdownMenuSeparatorV2,
+	DropdownSubMenuV2,
+	DropdownSubMenuTriggerV2,
+} = unlock( componentsPrivateApis );
+
+const PAGE_SIZE_VALUES = [ 2, 5, 20, 50 ];
+
+export function DataTablePageSizeControl() {
+	const table = useDataTableContext();
+	const prefix = __( 'Rows per page:' );
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			labelPosition="side"
+			prefix={
+				<InputControlPrefixWrapper
+					as={ 'label' }
+					className="edit-site-table__per-page-control-prefix"
+				>
+					{ prefix }
+				</InputControlPrefixWrapper>
+			}
+			value={ table.getState().pagination.pageSize }
+			options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {
+				value: pageSize,
+				label: pageSize,
+			} ) ) }
+			onChange={ ( value ) => table.setPageSize( +value ) }
+		/>
+	);
+}
+
+// TODO: probably the selected value should be a user setting per list..
+function DataTablePageSizeMenu() {
+	const table = useDataTableContext();
+	const currenPageSize = table.getState().pagination.pageSize;
+	return (
+		<DropdownSubMenuV2
+			trigger={
+				<DropdownSubMenuTriggerV2
+					suffix={
+						<>
+							{ currenPageSize }
+							<Icon icon={ chevronRightSmall } />{ ' ' }
+						</>
+					}
+				>
+					{ __( 'Rows per page' ) }
+				</DropdownSubMenuTriggerV2>
+			}
+		>
+			{ PAGE_SIZE_VALUES.map( ( size ) => {
+				return (
+					<DropdownMenuItemV2
+						key={ size }
+						prefix={
+							currenPageSize === size && <Icon icon={ check } />
+						}
+						onSelect={ ( event ) => {
+							// We need to handle this on DropDown component probably..
+							event.preventDefault();
+							table.setPageSize( size );
+						} }
+						// TODO: check about role and a11y.
+						role="menuitemcheckbox"
+					>
+						{ size }
+					</DropdownMenuItemV2>
+				);
+			} ) }
+		</DropdownSubMenuV2>
+	);
+}
+
+function DataTableColumnsVisibilityMenu() {
+	const table = useDataTableContext();
+	const hideableColumns = table
+		.getAllColumns()
+		.filter( ( columnn ) => columnn.getCanHide() );
+	if ( ! hideableColumns?.length ) {
+		return null;
+	}
+	return (
+		<DropdownSubMenuV2
+			trigger={
+				<DropdownSubMenuTriggerV2
+					suffix={ <Icon icon={ chevronRightSmall } /> }
+				>
+					{ __( 'Columns' ) }
+				</DropdownSubMenuTriggerV2>
+			}
+		>
+			{ hideableColumns?.map( ( column ) => {
+				return (
+					<DropdownMenuItemV2
+						key={ column.id }
+						prefix={
+							column.getIsVisible() && <Icon icon={ check } />
+						}
+						onSelect={ ( event ) => {
+							event.preventDefault();
+							column.getToggleVisibilityHandler()( event );
+						} }
+						role="menuitemcheckbox"
+					>
+						{ column.columnDef.header }
+					</DropdownMenuItemV2>
+				);
+			} ) }
+		</DropdownSubMenuV2>
+	);
+}
+
+// function ResetControl( { onSelect } ) {
+// 	return (
+// 		<DropdownMenuGroupV2>
+// 			<DropdownMenuItemV2 onSelect={ onSelect }>
+// 				{ __( 'Reset' ) }
+// 			</DropdownMenuItemV2>
+// 		</DropdownMenuGroupV2>
+// 	);
+// }
+
+export default function DataTableActions( {
+	className,
+	// TODO: check if we need something fixed here and use props
+	// or we would need slot and compose components..
+	showColumnsVisibility = true,
+} ) {
+	return (
+		<DropdownMenuV2
+			label={ __( 'Actions' ) }
+			className={ className }
+			trigger={
+				<Button variant="tertiary" icon={ blockTable }>
+					{ __( 'View' ) }
+					<Icon icon={ chevronDown } />
+				</Button>
+			}
+		>
+			<DropdownMenuGroupV2>
+				{ !! showColumnsVisibility && (
+					<DataTableColumnsVisibilityMenu />
+				) }
+				<DataTablePageSizeMenu />
+			</DropdownMenuGroupV2>
+		</DropdownMenuV2>
+	);
+}

packages/edit-site/src/components/datatable/datatable-bulk-actions.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Popover,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { sprintf, __, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useDataTableContext } from './context';
+
+export default function DataTableBulkActions( { anchor, children } ) {
+	const table = useDataTableContext();
+	// TODO: probably will need to reset the selection on various actions or just in `data` change..
+	const selectedRows = table.getSelectedRowModel().flatRows;
+	// TODO: if not children and fills, do not render..
+	// const fills = useSlotFills( DATATABLE_BULK_ACTIONS_SLOT_NAME );
+	// if ( ! selectedRows.length || ! fills?.length ) {
+	// 	return null;
+	// }
+	if ( ! selectedRows.length ) {
+		return null;
+	}
+	return (
+		<Popover
+			anchor={ anchor }
+			placement="bottom"
+			focusOnMount={ false }
+			className="datatable-bulk-actions__popover"
+		>
+			<HStack justify="flex-start" spacing={ 3 }>
+				<Text variant="muted">
+					{
+						// translators: %s: Total number of selected entries.
+						sprintf(
+							// translators: %s: Total number of selected entries.
+							_n( '%s item', '%s items', selectedRows.length ),
+							selectedRows.length
+						)
+					}
+				</Text>
+				{ children }
+				<Button onClick={ () => table.resetRowSelection() }>
+					{ __( 'Deselect' ) }
+				</Button>
+			</HStack>
+		</Popover>
+	);
+}

packages/edit-site/src/components/datatable/datatable-global-search-input.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import DataTableTextFilter from './datatable-text-filter';
+import { useDataTableContext } from './context';
+
+// type DataTableTextFilterProps = {
+// 	className: string;
+// 	searchLabel: string;
+// 	onChange: any;
+// };
+
+export default function DataTableGlobalSearchInput( props ) {
+	const table = useDataTableContext();
+	return (
+		<DataTableTextFilter { ...props } onChange={ table.setGlobalFilter } />
+	);
+}