new themes - paulmaclean/datatables.webcomponent GitHub Wiki

You can remove all the built in styling and replace it with your own theme using the theme property.

Example View in Browser

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

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

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

//theme.css
table {
    border: 1px solid #1C6EA4;
    background-color: #EEEEEE;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}
table td, table th {
    border: 1px solid #AAAAAA;
    padding: 3px 2px;
}
...

Like overrides, this setup requires a bundler to load css as a string. See the overrides section for a sample config.

Removing all styles.

You can remove all styles by setting the theme property to a blank string. It would then be up to the author to set the styles. Along with pureCSS, the default css includes a few overrides