css overrides - paulmaclean/datatables.webcomponent GitHub Wiki

You may supply the styleOverrides property a string containing css. This will be applied to the component style. datatables.webcomponent utilies [pureCSS}(https://purecss.io/) as a base framework.

Example View in Browser

import {LitElement, html} from "@polymer/lit-element";
import * as sampleData from '../generated.json';
import overrides from "./overrides.css"

export default class Overrides extends LitElement {
    public static componentName = 'app';

    render() {
        return html`
            <example-data-table
                .styleOverrides="${overrides}"
                .data="${sampleData.default}"
                .summable="${ {colIndexes: [2]} }"
                .filterable="${ {colIndexes: [5]} }"
                >
            </example-data-table>`
    }
}

//overrides.css
table, input, select {
    background-color: lavender;
}

.pure-form select {
    background-color: lavender;
    color: #000;
}

.pure-button {
    background-color: mediumorchid;
    color: #fff;
}

.pure-table thead {
    background-color: mediumpurple;
    color: #fff;
}

**Note: This setup requires a bundler to load the css as a string.

Example Webpack config

module: {
        rules: [
            {test: /\.tsx?$/, loader: "ts-loader"},
            {
                test: /\.css$/,
                use: [
                    {loader: "to-string-loader"},
                    {loader: "css-loader"}
                ]
            },
        ]
    },