@cimpress/react-components/dist/esm/docs/components/reacttablev6/table.js

React components to support the MCP styleguide

import React, { Component } from 'react';
import { ReactTablev6, Checkbox, TextField } from '@cimpress/react-components';
const labels = ['Interscope', 'Universal'];
const columns = [
    { Header: 'Title', accessor: 'title' },
    { Header: 'Released', accessor: 'released' },
    {
        Header: 'Label',
        accessor: 'label',
        filterMethod: (filter, row) => {
            if (filter.value === 'all') {
                return true;
            }
            return row[filter.id] === filter.value;
        },
        /* eslint-disable react/prop-types */
        Filter: ({ filter, onChange }) => (React.createElement("select", { onChange: e => onChange(e.target.value), style: { width: '100%' }, value: filter ? filter.value : 'all' },
            React.createElement("option", { value: "all" }, "Show All"),
            labels.map(value => (React.createElement("option", { value: value, key: value }, value))))),
        /* eslint-enable react/prop-types */
    },
    {
        Header: 'Chart Position',
        accessor: 'chart',
        className: 'hidden-sm',
        headerClassName: 'hidden-sm',
    },
];
const fakeData = Array(1000)
    .fill(0)
    .map((_, i, arr) => ({
    title: `Album #${i + 1}`,
    released: `July 8, ${1997 + i}`,
    label: labels[i % labels.length],
    chart: arr.length - i,
}));
export default class TableDemo extends Component {
    constructor() {
        super(...arguments);
        Object.defineProperty(this, "state", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: {
                condensed: false,
                selectable: false,
                filterable: true,
                loading: false,
                noData: false,
                useCustomLoadingText: false,
                loadingText: 'Gathering some data for ya...',
                useCustomNoDataText: false,
                noDataText: 'Really nothing here...',
            }
        });
        Object.defineProperty(this, "toggle", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: state => {
                this.setState(prevState => ({ [state]: !prevState[state] }));
            }
        });
        Object.defineProperty(this, "onChangeLoadingText", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: r => {
                this.setState({ loadingText: r.target.value });
            }
        });
        Object.defineProperty(this, "onChangeNoDataText", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: r => {
                this.setState({ noDataText: r.target.value });
            }
        });
    }
    render() {
        const { condensed, selectable, filterable, loading, useCustomLoadingText, loadingText, useCustomNoDataText, noData, noDataText, } = this.state;
        return (React.createElement("div", null,
            React.createElement(Checkbox, { label: "condensed", checked: this.state.condensed, onChange: () => this.toggle('condensed') }),
            React.createElement(Checkbox, { label: "selectable", checked: this.state.selectable, onChange: () => this.toggle('selectable') }),
            React.createElement(Checkbox, { label: "filterable", checked: this.state.filterable, onChange: () => this.toggle('filterable') }),
            React.createElement(Checkbox, { label: "loading", checked: this.state.loading, onChange: () => this.toggle('loading') }),
            React.createElement("div", { className: "form-group" },
                React.createElement(Checkbox, { label: "use custom loadingText", checked: this.state.useCustomLoadingText, onChange: () => this.toggle('useCustomLoadingText') }),
                React.createElement(TextField, { type: "text", className: "form-control", id: "loadingText", value: this.state.loadingText, disabled: !this.state.useCustomLoadingText, onChange: this.onChangeLoadingText })),
            React.createElement(Checkbox, { label: "noData", checked: this.state.noData, onChange: () => this.toggle('noData') }),
            React.createElement("div", { className: "form-group" },
                React.createElement(Checkbox, { label: "use custom noDataText", checked: this.state.useCustomNoDataText, onChange: () => this.toggle('useCustomNoDataText') }),
                React.createElement(TextField, { type: "text", className: "form-control", id: "noDataText", value: this.state.noDataText, disabled: !this.state.useCustomNoDataText, onChange: this.onChangeNoDataText })),
            React.createElement(ReactTablev6, { columns: columns, data: noData ? [] : fakeData, condensed: condensed, selectable: selectable, filterable: filterable, loading: loading, loadingText: useCustomLoadingText && loadingText, noDataText: useCustomNoDataText && noDataText, keyField: "title" })));
    }
}
//# sourceMappingURL=table.js.map