Skip to main content

Styling

You can customize styles of the Grid interface to meet your project requirements. The library provides a wide range of CSS variables with three built-in themes:

  • Material
  • Willow
  • WillowDark

Moreover, you can apply custom styles to cells, columns and rows using the cellStyle, columnStyle, and rowStyle properties.

Theme settings​

Willow theme settings:

:global(.wx-willow-theme) {
    --wx-table-select-background: #eaedf5;
    --wx-table-select-focus-background: #ebedf3;
    --wx-table-select-color: var(--wx-color-font);
    --wx-table-border: 1px solid #e6e6e6;
    --wx-table-select-border: inset 3px 0 var(--wx-color-primary);
    --wx-table-header-border: var(--wx-table-border);
    --wx-table-header-cell-border: var(--wx-table-border);
    --wx-table-footer-cell-border: var(--wx-table-border);
    --wx-table-cell-border: var(--wx-table-border);
    --wx-header-font-weight: 600;
    --wx-table-header-background: #f2f3f7;
    --wx-table-fixed-column-right-border: 3px solid #e6e6e6;
    --wx-table-editor-dropdown-border: var(--wx-table-border);
    --wx-table-editor-dropdown-shadow: 0px 4px 20px 0px rgba(44, 47, 60, 0.12);
    }

:global(.wx-willow-theme .menu) {
    box-shadow: 0px 4px 20px 0px rgba(44, 47, 60, 0.12);
    outline: 1px solid #e6e6e6;
}

WillowDark theme settings:

:global(.wx-willow-dark-theme) {
    --wx-table-select-background: #384047;
    --wx-table-select-focus-background: #465059;
    --wx-table-select-color: var(--wx-color-font);
    --wx-table-border: var(--wx-border);
    --wx-table-select-border: inset 3px 0 var(--wx-color-primary);
    --wx-table-header-border: var(--wx-table-border);
    --wx-table-header-cell-border: var(--wx-table-border);
    --wx-table-footer-cell-border: var(--wx-table-border);
    --wx-table-cell-border: var(--wx-table-border);
    --wx-header-font-weight: 600;
    --wx-table-header-background: #20262b;
    --wx-table-fixed-column-right-border: 3px solid var(--wx-background-alt);
    --wx-table-editor-dropdown-border: var(--wx-border);
    --wx-table-editor-dropdown-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.6);
}
:global(.wx-willow-dark-theme .menu) {
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.6);
    outline: var(--wx-border);
}

Material theme settings:

:global(.wx-material-theme) {
    --wx-table-select-background: rgba(0, 0, 0, 0.06);
    --wx-table-select-focus-background: rgba(213, 230, 255, 0.6);
    --wx-table-select-color: var(--wx-color-font);
    --wx-table-border: 1px solid #dfdfdf;
    --wx-table-select-border: none;
    --wx-table-header-border: var(--wx-table-border);
    --wx-table-header-cell-border: var(--wx-table-border);
    --wx-table-footer-cell-border: var(--wx-table-border);
    --wx-table-cell-border: var(--wx-table-border);
    --wx-header-font-weight: 500;
    --wx-table-header-background: #fafafb;
    --wx-table-fixed-column-right-border: 3px solid #dfdfdf;
    --wx-table-editor-dropdown-border: none;
    --wx-table-editor-dropdown-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
:global(.wx-material-theme .menu) {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    outline: none;
}

Applying a theme​

You can style the interface applying one of the three themes:

  • Material
  • Willow
  • WillowDark

Apply the desired theme by importing the theme from the source file and wrapping Grid into the required theme tag:

<script>
    import { Grid } from "@wx/svelte-grid";
    import { Willow } from "@wx/svelte-core";

</script>

<Willow>
  <Grid />
</Willow>

Customizing theme settings​

To change the table styles, create a CSS class by changing values of the required CSS variables and apply it to the Grid.

The example below will change any current theme applied to the table.

Example: 

<script>
    import { getData } from "./common/data";
    import { Grid } from "@wx/svelte-grid";

    const { data, columns } = getData();

</script>
    
  <div class="demo" style="padding: 20px;">
    <div>
        <Grid {data} {columns} footer={true} />
    </div>
 </div>

<style>
    .demo {
        --wx-table-header-background: #2ca0e3;
        --wx-border: 1px solid #818080;
        --wx-table-header-cell-border: #2ca0e3;
    }
</style>

The example below demonstrates how to change the Material theme that is applied to the table:

<script>
    import { getData } from "./common/data";
    import { Grid } from "@wx/svelte-grid";
    import { Material } from "@wx/svelte-core";

    const { data, columns } = getData();

</script>

<Material>
    <Grid {data} {columns} footer={true} />
</Material>

<style>
    :global(.wx-material-theme) {
        --wx-table-header-background: #2ca0e3;
        --wx-border: 1px solid #818080;
        --wx-table-header-cell-border: #2ca0e3;
    }
</style>

Styling cells​

The widget allows applying a custom Svelte component to a cell and styling a cell with a custom CSS class.

info

This section describes how to apply styles to cells. If you want to know how to create complex editors out of custom Svelte components, see the Applying complex editors section.

To add a CSS class to a cell, use the cellStyle property. cellStyle can be defined as a function that returns the name of a CSS class or an empty string.

Example:

<script>
    import { getData } from "./common/data";
    import { Grid } from "@wx/svelte-grid";

    const { data, columns } = getData();

</script>

 <Grid 
  {data}
  {columns}
  cellStyle={(row, col) => (row.id == 14 && col.id == 'lastName' ? 'cellStyle' : '')}
  footer={true} />

<style>
    :global(.row:not(.selected) .cellStyle) {
        color: white;
        background: #1b85dc;
    }
</style>

Styling columns​

To add a CSS class to a column, define the columnStyle property. columnStyle can be a function that returns the name of a CSS class or an empty string.

Example:

<script>
    import { getData } from "./common/data";
    import { Grid } from "@wx/svelte-grid";

    const { data, columns } = getData();

</script>

<div style="padding: 20px;">
  <div>
    <Grid
    {data}
    {columns}
    columnStyle={col => (col.id == 'city' ? 'columnStyle' : '')}
    footer={true} />
  </div>
</div>

<style>
    :global(.columnStyle) {
        text-decoration: underline;
        color: rgb(231, 7, 231);
    }
</style>

Styling rows​

To add a css class to a row, define the rowStyle property. The property can be a function that returns the name of a CSS class or an empty string.

Example:

<script>
    import { getData } from "./common/data";
    import { Grid } from "@wx/svelte-grid";

    const { data, columns } = getData();

</script>

<Grid
{data}
{columns}
rowStyle={row => (row.id == 11 ? 'rowStyle' : '')}
footer={true} />

<style>
    :global(.rowStyle:not(.selected) .cell) {
        color: white;
        background: #0ebf6c;
    }
</style>