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:

• 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:

import { Grid, Willow } from "wx-react-grid";

export default function App() {
  return (
    <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:

import { getData } from "./common/data";
import { Grid } from "wx-react-grid";

const { data, columns } = getData();

export default function App() {
    return (
        <div className="demo" style={{ padding: '20px' }}>
            <div>
                <Grid data={data} columns={columns} footer={true} />
            </div>
        </div>
    );
}

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

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

import { useRef } from 'react';
import { getData } from "./common/data";
import { Grid, WillowDark } from "wx-react-grid";

const { data, columns } = getData();

export default function App() {
    const api = useRef(null);

    return (
        <WillowDark>
            <Grid data={data} columns={columns} footer={true} api={api} />
        </WillowDark>
    );
}

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

Styling cells

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

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:

import { getData } from "./common/data";
import { Grid } from "wx-react-grid";

const { data, columns } = getData();

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

.row:not(.selected) .cellStyle {
    color: white;
    background: #1b85dc;
}

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:

const { data, columns } = getData();

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

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

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:

const { data, columns } = getData();

export default function App() {
    const api = useRef(null);

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

.rowStyle:not(.selected) .cell {
    color: white;
    background: #0ebf6c;
}