Trouble making @wordpress/dataviews look like Storybook examples (headers alignment, dividers, composition API mismatch)

[ivanjeremic]

Trouble making @wordpress/dataviews match Storybook examples (header alignment, dividers, composition API)

Hi everyone,

I’m integrating @wordpress/dataviews into a WordPress admin screen and I can’t get it to visually match the official Storybook examples:

https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs

Issues I’m Hitting

1. Column headers are centered — I need them left-aligned like in the docs. Can’t find a prop for that; only cell content can be styled via render.
2. No dividers / grid lines — The Storybook examples show clear row and column separation. My rendered table looks “flat”.
3. “Free Composition” components missing — Docs reference <DataViews>, <Search>, <Layout>, <Pagination> etc. but those sub-components aren’t exported from @wordpress/dataviews/wp in my installed version (TypeScript import errors).
4. Docs vs types mismatch — Documentation mentions an align option (e.g. in column or layout config) but the installed types.ts doesn’t include align in ColumnStyle; adding it causes type errors.
5. layout.styles feels brittle — Widths work but feel hacky; removing them yields unexpected centering or compression.
6. Passing children causes TS error — Using <DataViews> ...children... </DataViews> gives:
   Property 'children' does not exist on type ...
7. Search / pagination auto-rendering unclear — Sometimes they appear implicitly, other times not; behavior seems dependent on prop combinations or version.

Environment

• WordPress (plugin admin page)
• @wordpress/dataviews/wp (version bundled with current WP/Gutenberg; can provide exact version if needed)
• React via @wordpress/element
• TypeScript
• Following Storybook + docs examples

What I Expected

• Left-aligned headers (like Storybook)
• Visible row & column dividers
• Working “Free Composition” pattern with sub-components
• Ability to configure alignment cleanly

What I Got

• Centered headers (only body cells easy to left-align)
• No default grid/dividers
• Missing exported sub-components (Search, Layout, Pagination)
• Types missing align
• children not accepted on main <DataViews> (in this version?)
• Trial-and-error required for search/pagination rendering

Minimal Field Config

const fields: Field<MyItem>[] = [
  {
    id: 'slug',
    label: 'Slug',
    render: ({ item }) => (
      <strong style={{ fontFamily: 'monospace' }}>{item.slug}</strong>
    ),
  },
  // ...
];

Attempts So Far

• Inline styles in each field render for cell text alignment
• Applying legacy WP admin table classes (.wp-list-table, .widefat) — didn’t mesh with DataViews markup
• Inspecting node_modules/@wordpress/dataviews/src/types.ts — confirmed no align
• Trying composition pattern from docs — blocked by missing exports
• Removing width styles to let it auto-size — no improvement in dividers
• Wrapping in / — purely cosmetic

Questions

• Is the “Free Composition” API only in a newer Gutenberg build / different import path?
• How to left-align headers without global CSS overrides?
• How to enable the Storybook-style grid/dividers?
• Are the docs ahead of the released NPM/WP-bundled version?
• Is there a supported header-level style API (per column) I’m missing?

Any guidance on:

• Correct import path for composition sub-components
• Enabling divider/border styling
• Proper header alignment approach
• would be hugely appreciated.

Thanks!