Skip to content

DataViews: Pass styles to the column. #72813

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
StevenDufresne wants to merge 2 commits into
base: trunk
Choose a base branch
from
Draft

DataViews: Pass styles to the column. #72813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8780e3a
Pass styles to the column.
StevenDufresne Oct 30, 2025
e4cd6b3
Add styling to all and pass to header and footer.
StevenDufresne Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/dataviews/src/components/dataviews-footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export default function DataViewsFooter() {
expanded={ false }
justify="end"
className="dataviews-footer"
style={ view.layout?.styles?.__default__ }
>
{ hasBulkActions && <BulkActionsFooter /> }
<DataViewsPagination />
Expand Down
11 changes: 10 additions & 1 deletion packages/dataviews/src/components/dataviews/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -88,13 +94,16 @@ function DefaultUI( {
search = true,
searchLabel = undefined,
}: DefaultUIProps ) {
const { view } = useContext( DataViewsContext );

return (
<>
<HStack
alignment="top"
justify="space-between"
className="dataviews__view-actions"
spacing={ 1 }
style={ view.layout?.styles?.__default__ }
>
<HStack
justify="start"
Expand Down
58 changes: 33 additions & 25 deletions packages/dataviews/src/dataviews-layouts/table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,20 @@ function TableColumnField< Item >( {
);
}

function getColumnStyles( view: ViewTableType, columnId: string ) {
Copy link
Contributor

@youknowriad youknowriad Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any perf penalty of this regenerating an object on each render? Maybe not

Copy link
Contributor Author

@StevenDufresne StevenDufresne Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not in what it currently does, but it could if style logic becomes more complex.

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,
Expand Down Expand Up @@ -194,7 +208,10 @@ function TableRow< Item >( {
} }
>
{ hasBulkActions && (
<td className="dataviews-view-table__checkbox-column">
<td
className="dataviews-view-table__checkbox-column"
style={ getColumnStyles( view, '__bulk_actions__' ) }
>
<div className="dataviews-view-table__cell-content-wrapper">
<DataViewsSelectionCheckbox
item={ item }
Expand All @@ -208,7 +225,7 @@ function TableRow< Item >( {
</td>
) }
{ hasPrimaryColumn && (
<td>
<td style={ getColumnStyles( view, '__primary__' ) }>
<ColumnPrimary
item={ item }
level={ level }
Expand All @@ -224,24 +241,14 @@ function TableRow< Item >( {
</td>
) }
{ columns.map( ( column: string ) => {
// Explicit picks the supported styles.
const { width, maxWidth, minWidth, align } =
view.layout?.styles?.[ column ] ?? {};

const columnStyles = getColumnStyles( view, column );
return (
<td
key={ column }
style={ {
width,
maxWidth,
minWidth,
} }
>
<td key={ column } style={ columnStyles }>
<TableColumnField
fields={ fields }
item={ item }
column={ column }
align={ align }
align={ columnStyles.textAlign }
/>
</td>
);
Expand All @@ -261,6 +268,7 @@ function TableRow< Item >( {
isActionsColumnSticky,
} ) }
onClick={ ( e ) => e.stopPropagation() }
style={ getColumnStyles( view, '__actions__' ) }
>
<ItemActions item={ item } actions={ actions } />
</td>
Expand Down Expand Up @@ -380,6 +388,10 @@ function ViewTable< Item >( {
<th
className="dataviews-view-table__checkbox-column"
scope="col"
style={ getColumnStyles(
view,
'__bulk_actions__'
) }
>
<BulkSelectionCheckbox
selection={ selection }
Expand All @@ -391,7 +403,10 @@ function ViewTable< Item >( {
</th>
) }
{ hasPrimaryColumn && (
<th scope="col">
<th
scope="col"
style={ getColumnStyles( view, '__primary__' ) }
>
{ titleField && (
<ColumnHeaderMenu
ref={ headerMenuRef(
Expand All @@ -410,18 +425,10 @@ function ViewTable< Item >( {
</th>
) }
{ columns.map( ( column, index ) => {
// Explicit picks the supported styles.
const { width, maxWidth, minWidth, align } =
view.layout?.styles?.[ column ] ?? {};
return (
<th
key={ column }
style={ {
width,
maxWidth,
minWidth,
textAlign: align,
} }
style={ getColumnStyles( view, column ) }
aria-sort={
view.sort?.direction &&
view.sort?.field === column
Expand Down Expand Up @@ -456,6 +463,7 @@ function ViewTable< Item >( {
! isHorizontalScrollEnd,
}
) }
style={ getColumnStyles( view, '__actions__' ) }
>
<span className="dataviews-view-table-header">
{ __( 'Actions' ) }
Expand Down
7 changes: 7 additions & 0 deletions packages/dataviews/src/stories/dataviews.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,6 +363,13 @@ export const WithCard = () => {
titleField: 'title',
descriptionField: 'description',
mediaField: 'image',
layout: {
Copy link
Contributor Author

@StevenDufresne StevenDufresne Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for testing.

styles: {
__default__: {
paddingInline: '100px',
},
},
},
} );
const { data: shownData, paginationInfo } = useMemo( () => {
return filterSortAndPaginate( data, view, fields );
Expand Down
50 changes: 29 additions & 21 deletions packages/dataviews/src/types/dataviews.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -235,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 {
Expand All @@ -250,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 >;
};
}

Expand All @@ -266,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 >;
};
}

Expand Down
Loading