How to use the dash-table/components/Table/props.ColumnType.Text function in dash-table

To help you get started, we’ve selected a few dash-table examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github plotly / dash-table / tests / visual / percy-storybook / fixtures.ts View on Github external
import { ColumnType, Presentation } from 'dash-table/components/Table/props';

export default [
    {
        name: 'fixed rows -> dropdown',
        props: {
            id: 'table',
            columns: [
                {
                    name: 'Column 1',
                    id: 'column-1',
                    type: ColumnType.Text,
                    presentation: Presentation.Dropdown
                }
            ],
            dropdown: {
                'column-1': {
                    options: [
                        { label: 'Montréal', value: 'mtl' },
                        { label: 'San Francisco', value: 'sf' }
                    ]
                }
            },
            data: [
                {'column-1': 'mtl'},
                {'column-1': 'sf'},
                {'column-1': 'mtl'},
                {'column-1': 'boston'}
github plotly / dash-table / tests / visual / percy-storybook / Style.percy.tsx View on Github external
.add('with 1 column', () => ())
    .add('row padding', () => (
github plotly / dash-table / tests / visual / percy-storybook / fixtures.ts View on Github external
}
    },

    {
        name: 'dropdown with column widths',
        props: {
            fill_width: false,
            style_data_conditional: [
                { if: { column_id: 'column-2' }, width: 400 },
                { if: { column_id: 'column-3' }, width: 80 }
            ],
            columns: [
                {
                    name: 'Column 1',
                    id: 'column-1',
                    type: ColumnType.Text,
                    presentation: Presentation.Dropdown
                },
                {
                    name: 'Column 2',
                    id: 'column-2',
                    type: ColumnType.Text,
                    presentation: Presentation.Dropdown
                },
                {
                    name: 'Column 3',
                    id: 'column-3',
                    type: ColumnType.Text,
                    presentation: Presentation.Dropdown
                }
            ],
            dropdown: {
github plotly / dash-table / tests / visual / percy-storybook / Style.percy.tsx View on Github external
columns={[
            { id: 'a', name: 'A', type: ColumnType.Any },
            { id: 'b', name: 'B', type: ColumnType.Any },
            { id: 'c', name: 'C', type: ColumnType.Text },
            { id: 'd', name: 'D', type: ColumnType.Text },
            { id: 'e', name: 'E', type: ColumnType.Numeric },
            { id: 'f', name: 'F', type: ColumnType.Numeric },
            { id: 'g', name: 'G' },
            { id: 'h', name: 'H' }
        ]}
        style_data_conditional={[
            { if: { column_type: ColumnType.Any, row_index: 'even' }, background_color: 'blue', color: 'white' },
            { if: { column_type: ColumnType.Text, row_index: 'even' }, background_color: 'red', color: 'white' },
            { if: { column_type: ColumnType.Numeric, row_index: 'even' }, background_color: 'green', color: 'white' },
            { if: { column_type: ColumnType.Any }, background_color: 'blue' },
            { if: { column_type: ColumnType.Text }, background_color: 'red' },
            { if: { column_type: ColumnType.Numeric }, background_color: 'green' }
        ]}
    />))
    .add('row padding', () => (
github plotly / dash-table / tests / visual / percy-storybook / Style.percy.tsx View on Github external
.add('green if table is not editable', () => ())
    .add('first column is editable and blue', () => (
github plotly / dash-table / tests / visual / percy-storybook / Style.percy.tsx View on Github external
.add('with 1 column', () => ())
    .add('row padding', () => (
github plotly / dash-table / demo / data.ts View on Github external
{
        id: 'bbb',
        name: ['', 'Weather', 'Climate'],
        type: ColumnType.Text,
        presentation: 'dropdown',
        data: gendata(
            i => ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'][i % 4],
            rows
        )
    },

    {
        id: 'bbb-readonly',
        name: ['', 'Weather', 'Climate-RO'],
        type: ColumnType.Text,
        presentation: 'dropdown',
        editable: false,
        data: gendata(
            i => ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'][i % 4],
            rows
        )
    },

    {
        id: 'aaa',
        name: ['', 'Weather', 'Temperature'],
        type: ColumnType.Numeric,
        data: gendata(i => i + 1, rows)
    },

    {
github plotly / dash-table / src / dash-table / type / reconcile.ts View on Github external
function getCoercer(c: Options): (value: any, c?: any) => IReconciliation {
    switch (c.type) {
        case ColumnType.Numeric:
            return coerceNumber;
        case ColumnType.Text:
            return coerceText;
        case ColumnType.Datetime:
            return coerceDate;
        case ColumnType.Any:
        default:
            return reconcileAny;
    }
}
github plotly / dash-table / demo / data.ts View on Github external
type: ColumnType.Numeric,
        data: gendata(i => i + 1, rows)
    },

    {
        id: 'g.gg',
        name: ['City', 'France', 'Paris'],
        type: ColumnType.Numeric,
        editable: true,
        data: gendata(i => i * 10, rows)
    },

    {
        id: 'b+bb',
        name: ['', 'Weather', 'Climate'],
        type: ColumnType.Text,
        presentation: 'dropdown',
        data: gendata(
            i => ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'][i % 4],
            rows
        )
    }
]);
github plotly / dash-table / src / dash-table / syntax-tree / SingleColumnSyntaxTree.ts View on Github external
function getImplicitLexeme(type: ColumnType = ColumnType.Any): ILexemeResult {
    switch (type) {
        case ColumnType.Any:
        case ColumnType.Text:
            return {
                lexeme: boundLexeme(contains),
                value: RelationalOperator.Contains
            };
        case ColumnType.Datetime:
            return {
                lexeme: boundLexeme(dateStartsWith),
                value: RelationalOperator.DateStartsWith
            };
        case ColumnType.Numeric:
            return {
                lexeme: boundLexeme(equal),
                value: RelationalOperator.Equal
            };
    }
}