Table powered by Angular Material library.

Example of usage

Simple table with built-in pagination, sort and search.

export const component: DraymanComponent = async ({ forceUpdate }) => {
    const data = [
        { name: { value: 'Carbon' }, weight: { value: 12.0107 }, symbol: { value: 'C' } },
        { name: { value: 'Hydrogen' }, weight: { value: 1.0079 }, symbol: { value: 'H' } },
        { name: { value: 'Fluorine' }, weight: { value: 18.9984 }, symbol: { value: 'F' } },
        { name: { value: 'Boron' }, weight: { value: 10.811 }, symbol: { value: 'B' } },
        { name: { value: 'Lithium' }, weight: { value: 6.941 }, symbol: { value: 'Li' } },
        { name: { value: 'Helium' }, weight: { value: 4.0026 }, symbol: { value: 'He' } },
        { name: { value: 'Neon' }, weight: { value: 20.1797 }, symbol: { value: 'Ne' } },
        { name: { value: 'Nitrogen' }, weight: { value: 14.0067 }, symbol: { value: 'N' } },
        { name: { value: 'Oxygen' }, weight: { value: 15.9994 }, symbol: { value: 'O' } },
        { name: { value: 'Beryllium' }, weight: { value: 9.0122 }, symbol: { value: 'Be' } },
    ];

    const columns = [{
        field: 'name',
        label: 'Name',
    }, {
        field: 'weight',
        label: 'Weight',
    }, {
        field: 'symbol',
        label: 'Symbol',
    }];

    return () => <drayman-table key="table" pagination sort search columns={columns} data={data} />;
}

Table with remote data, pagination and search (disableInternalProcessing set to true).

import axios from 'axios';

export const component: DraymanComponent = async ({ forceUpdate }) => {
    const API_KEY = ``;
    let data = [];
    let itemCount;
    let pageIndex = 0;
    let searchValue = 'brea';

    const getMovieResponse = async () => {
        const page = pageIndex + 1;
        const result = await axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${searchValue}&page=${page}`);
        data = getTableData(result.data.results.map(x => ({ title: x.title, rating: x.vote_average })));
        pageIndex = result.data.page - 1;
        itemCount = result.data.total_results;
    }

    await getMovieResponse();

    return () => {
        const options = {
            data,
            columns: [{
                field: 'title',
                label: 'Title',
            }, {
                field: 'rating',
                label: 'Rating',
            }],
            pagination: true,
            pageSizeOptions: [],
            pageSize: 20,
            search: true,
            disableInternalProcessing: true,
            itemCount,
            pageIndex,
            initialSearchValue: searchValue,
            onPageChange: async (data) => {
                pageIndex = data.pageIndex;
                await getMovieResponse();
                await forceUpdate();
            },
            onSearchChange: async ({ value }) => {
                searchValue = value;
                await getMovieResponse();
                await forceUpdate();
            },
        }

        return <drayman-table {...options} />;
    };
}

function getTableData(data) {
    return data.map(x => Object.fromEntries(
        Object.entries(x).map(([key, value]) => [key, { value }])
    ));
}

Table with editable fields

export const component: DraymanComponent = async ({ forceUpdate }) => {
    const data = [];

    return () => {
        return <drayman-table
            data={data}
            columns={[{
                field: 'name',
                label: 'Name',
                type: 'text-field',
            }, {
                field: 'age',
                label: 'Age',
                type: 'number-field',
            }]}
            toolbarButtons={[{
                view: 'icon',
                icon: 'add'
            }]}
            onToolbarButtonClick={async ({ selectedRows, buttonDefinition }) => {
                data.push({
                    name: { value: null },
                    age: { value: null },
                    id: { value: data.length },
                });
                await forceUpdate();
            }}
            onCellValueChange={async ({ row, field, value }) => {
                const rowToEdit = data.find(x => x.id.value === row.id.value);
                rowToEdit[field].value = value;
                rowToEdit[field].error = field === 'age' && value < 18 ? 'Too young' : null;
                await forceUpdate();
            }}
            title="Editable data grid"
        />;
    };
}