How can I change the font size of the regular-table?

[osborn-devfaker]

I tried adding the following style:

regular-table th, regular-table td { font-size: 0.9rem; }

However, it does not seem to take effect. How can I increase or modify the font size?

[LarryHu0217]

On current Perspective, regular-table is rendered inside the perspective-viewer-datagrid shadow root. A document-level selector such as:

regular-table th,
regular-table td {
    font-size: 0.9rem;
}

does not cross that shadow boundary.

The datagrid exposes its regular-table element as a CSS part, so you can style the exposed part and let the font size inherit into its cells:

perspective-viewer-datagrid::part(regular-table) {
    font-size: 0.9rem;
}

A broader alternative is to set the inherited font size on the datagrid host:

perspective-viewer-datagrid {
    font-size: 0.9rem;
}

If this CSS is added or changed after the viewer has already rendered, ask the viewer to re-read its styles and repaint:

const viewer = document.querySelector("perspective-viewer");
await viewer.restyleElement();

This is based on the current implementation, where the datagrid assigns part="regular-table" and its internal regular-table inherits its font styling.

[texodus]

#3229 adds font size, family, alignment and style options for the grid and per-column, as well as the theme inheritance already supported.