From 8780e3aead187fd47d55dc23db6098eaf253edbf Mon Sep 17 00:00:00 2001 From: Bongnam Date: Thu, 30 Oct 2025 12:03:53 +0900 Subject: [PATCH 1/2] Pass styles to the column. --- .../src/dataviews-layouts/table/index.tsx | 57 +++++++++++-------- .../dataviews/src/stories/dataviews.story.tsx | 7 +++ packages/dataviews/src/types/dataviews.ts | 33 ++++------- 3 files changed, 51 insertions(+), 46 deletions(-) diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx index 0fcce4327142cc..a622e20b166d4a 100644 --- a/packages/dataviews/src/dataviews-layouts/table/index.tsx +++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx @@ -98,6 +98,20 @@ function TableColumnField< Item >( { ); } +function getColumnStyles( view: ViewTableType, columnId: string ) { + const stylesById = view.layout?.styles ?? {}; + const defaultStyles = stylesById.__default__ ?? {}; + const columnStyles = stylesById[ columnId ] ?? {}; + const { align, ...mergedStyles } = { + ...defaultStyles, + ...columnStyles, + }; + return { + ...mergedStyles, + textAlign: align, + }; +} + function TableRow< Item >( { hasBulkActions, item, @@ -194,7 +208,10 @@ function TableRow< Item >( { } } > { hasBulkActions && ( - +
( { ) } { hasPrimaryColumn && ( - + ( { ) } { columns.map( ( column: string ) => { - // Explicit picks the supported styles. - const { width, maxWidth, minWidth, align } = - view.layout?.styles?.[ column ] ?? {}; - + const columnStyles = getColumnStyles( view, column ); return ( - + ); @@ -380,6 +387,10 @@ function ViewTable< Item >( { ( { ) } { hasPrimaryColumn && ( - + { titleField && ( ( { ) } { columns.map( ( column, index ) => { - // Explicit picks the supported styles. - const { width, maxWidth, minWidth, align } = - view.layout?.styles?.[ column ] ?? {}; return ( ( { ! isHorizontalScrollEnd, } ) } + style={ getColumnStyles( view, '__actions__' ) } > { __( 'Actions' ) } diff --git a/packages/dataviews/src/stories/dataviews.story.tsx b/packages/dataviews/src/stories/dataviews.story.tsx index 43f91166840bab..70e9d1afd442a7 100644 --- a/packages/dataviews/src/stories/dataviews.story.tsx +++ b/packages/dataviews/src/stories/dataviews.story.tsx @@ -363,6 +363,13 @@ export const WithCard = () => { titleField: 'title', descriptionField: 'description', mediaField: 'image', + layout: { + styles: { + __default__: { + paddingInlineStart: '10px', + }, + }, + }, } ); const { data: shownData, paginationInfo } = useMemo( () => { return filterSortAndPaginate( data, view, fields ); diff --git a/packages/dataviews/src/types/dataviews.ts b/packages/dataviews/src/types/dataviews.ts index bb2836cc097331..e3906fe0f06983 100644 --- a/packages/dataviews/src/types/dataviews.ts +++ b/packages/dataviews/src/types/dataviews.ts @@ -188,27 +188,18 @@ interface ViewBase { infiniteScrollEnabled?: boolean; } -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; - - /** - * The alignment of the field column, defaults to left. - */ - align?: 'start' | 'center' | 'end'; -} +export type ColumnStyle = + // Allow any valid inline CSS style for td/th + Omit< React.CSSProperties, 'textAlign' > & { + /** + * Logical alignment; mapped to CSS textAlign where applicable. + */ + align?: 'start' | 'center' | 'end'; + /** + * Optional textAlign passthrough if ever needed for headers. + */ + textAlign?: React.CSSProperties[ 'textAlign' ]; + }; export type Density = 'compact' | 'balanced' | 'comfortable'; From e4cd6b3d7edb145131ea6db5b608c8867117ceeb Mon Sep 17 00:00:00 2001 From: Bongnam Date: Thu, 30 Oct 2025 12:37:37 +0900 Subject: [PATCH 2/2] Add styling to all and pass to header and footer. --- .../src/components/dataviews-footer/index.tsx | 1 + .../src/components/dataviews/index.tsx | 11 ++++++++++- .../src/dataviews-layouts/table/index.tsx | 1 + .../dataviews/src/stories/dataviews.story.tsx | 2 +- packages/dataviews/src/types/dataviews.ts | 17 +++++++++++++++++ 5 files changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/dataviews/src/components/dataviews-footer/index.tsx b/packages/dataviews/src/components/dataviews-footer/index.tsx index 191e16f47e2c96..c86db502f32131 100644 --- a/packages/dataviews/src/components/dataviews-footer/index.tsx +++ b/packages/dataviews/src/components/dataviews-footer/index.tsx @@ -41,6 +41,7 @@ export default function DataViewsFooter() { expanded={ false } justify="end" className="dataviews-footer" + style={ view.layout?.styles?.__default__ } > { hasBulkActions && } diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx index 9d5870174f9db7..4ceca30b186f4a 100644 --- a/packages/dataviews/src/components/dataviews/index.tsx +++ b/packages/dataviews/src/components/dataviews/index.tsx @@ -7,7 +7,13 @@ import type { ReactNode, ComponentProps, ReactElement } from 'react'; * WordPress dependencies */ import { __experimentalHStack as HStack } from '@wordpress/components'; -import { useEffect, useMemo, useRef, useState } from '@wordpress/element'; +import { + useContext, + useEffect, + useMemo, + useRef, + useState, +} from '@wordpress/element'; import { useResizeObserver, throttle } from '@wordpress/compose'; /** @@ -88,6 +94,8 @@ function DefaultUI( { search = true, searchLabel = undefined, }: DefaultUIProps ) { + const { view } = useContext( DataViewsContext ); + return ( <> ( { isActionsColumnSticky, } ) } onClick={ ( e ) => e.stopPropagation() } + style={ getColumnStyles( view, '__actions__' ) } > diff --git a/packages/dataviews/src/stories/dataviews.story.tsx b/packages/dataviews/src/stories/dataviews.story.tsx index 70e9d1afd442a7..015a4dfb231be1 100644 --- a/packages/dataviews/src/stories/dataviews.story.tsx +++ b/packages/dataviews/src/stories/dataviews.story.tsx @@ -366,7 +366,7 @@ export const WithCard = () => { layout: { styles: { __default__: { - paddingInlineStart: '10px', + paddingInline: '100px', }, }, }, diff --git a/packages/dataviews/src/types/dataviews.ts b/packages/dataviews/src/types/dataviews.ts index e3906fe0f06983..33f0cef96a3b13 100644 --- a/packages/dataviews/src/types/dataviews.ts +++ b/packages/dataviews/src/types/dataviews.ts @@ -226,6 +226,13 @@ export interface ViewTable extends ViewBase { export interface ViewList extends ViewBase { type: 'list'; + + layout?: { + /** + * The styles for the list. + */ + styles?: Record< string, ColumnStyle >; + }; } export interface ViewGrid extends ViewBase { @@ -241,6 +248,11 @@ export interface ViewGrid extends ViewBase { * The preview size of the grid. */ previewSize?: number; + + /** + * The styles for the list. + */ + styles?: Record< string, ColumnStyle >; }; } @@ -257,6 +269,11 @@ export interface ViewPickerGrid extends ViewBase { * The preview size of the grid. */ previewSize?: number; + + /** + * The styles for the list. + */ + styles?: Record< string, ColumnStyle >; }; }