How to use the dash-table/components/Table/props.Presentation.Dropdown 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
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: {
                'column-1': {
                    options: [
                        { label: 'Montréal', value: 'mtl' },
                        { label: 'San Francisco', value: 'sf' }
                    ]
                },
                'column-2': {
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 / src / dash-table / derived / cell / contents.tsx View on Github external
function getCellType(
    active: boolean,
    editable: boolean,
    dropdown: IDropdownValue[] | undefined,
    presentation: Presentation | undefined,
    is_loading: boolean
): CellType {
    switch (presentation) {
        case Presentation.Input:
            return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
        case Presentation.Dropdown:
            return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
        default:
            return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
    }
}
github plotly / dash-table / src / dash-table / derived / cell / contents.tsx View on Github external
function getCellType(
    active: boolean,
    editable: boolean,
    dropdown: IDropdownValue[] | undefined,
    presentation: Presentation | undefined,
    is_loading: boolean
): CellType {
    switch (presentation) {
        case Presentation.Input:
            return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
        case Presentation.Dropdown:
            return (!dropdown || !editable) ? CellType.DropdownLabel : CellType.Dropdown;
        default:
            return (!active || !editable || is_loading) ? CellType.Label : CellType.Input;
    }
}
github plotly / dash-table / src / dash-table / derived / cell / wrappers.tsx View on Github external
private getWrapper(
        active: boolean,
        selected: boolean,
        rowIndex: number,
        columnIndex: number,
        column: IColumn
    ) {
        const isDropdown = column.presentation === Presentation.Dropdown;
        const classes = 'dash-cell' +
            ` column-${columnIndex}` +
            (active ? ' focused' : '') +
            (selected ? ' cell--selected' : '') +
            (isDropdown ? ' dropdown' : '');

        return this.wrapper.get(rowIndex, columnIndex)(
            active,
            classes,
            columnIndex,
            column.id,
            rowIndex,
            this.handlers(Handler.Enter, rowIndex, columnIndex),
            this.handlers(Handler.Leave, rowIndex, columnIndex),
            this.handlers(Handler.Move, rowIndex, columnIndex),
            this.handlers(Handler.Click, rowIndex, columnIndex),