How to use dash-table - 10 common examples

}

    const getNullyCases = (
        columnId: ColumnId
    ): SortAsNull => {
        const column = R.find(c => c.id === columnId, columns);

        return (column && column.sort_as_null) || [];
    };

    const isNully = (
        value: any,
        columnId: ColumnId
    ) => R.isNil(value) || R.includes(value, getNullyCases(columnId));

    if (sort_action === TableAction.Native) {
        data = sort(data, sort_by, isNully);
    }

    // virtual_indices
    const indices = R.map(datum => map.get(datum) as number, data);

    return { data, indices };
};

let newData = R.clone(data);
    // Might add columns, not modifying the columns themselves, shallow clone is sufficient
    let newColumns = columns_.slice(0);
    let newVisibleColumns = visibleColumns.slice(0);

    if (overflowColumns && values[0].length + (activeCell as any).column >= visibleColumns.length) {
        const _newColumns = [];
        for (
            let i = visibleColumns.length;
            i < values[0].length + (activeCell as any).column;
            i++
        ) {
            _newColumns.push({
                id: `Column ${i + 1}`,
                name: `Column ${i + 1}`,
                type: ColumnType.Any,
                sort_as_null: []
            } as any);
            newData.forEach(row => (row[`Column ${i}`] = ''));
        }

        newColumns = R.insertAll(
            R.indexOf(R.last(visibleColumns), columns_) + 1,
            _newColumns,
            newColumns
        );

        newVisibleColumns = R.concat(newVisibleColumns, _newColumns);
    }

    const realActiveRow = derived_viewport_indices[(activeCell as any).row];
    if (overflowRows && values.length + realActiveRow >= data.length) {

export const handleClick = (propsFn: () => ICellFactoryProps, idx: number, i: number, e: any) => {
    const {
        selected_cells,
        active_cell,
        setProps,
        viewport,
        virtualized,
        visibleColumns
    } = propsFn();

    const row = idx + virtualized.offset.rows;
    const col = i + virtualized.offset.columns;

    const clickedCell = makeCell(row, col, visibleColumns, viewport);

    // clicking again on the already-active cell: ignore
    if (active_cell && row === active_cell.row && col === active_cell.column) {
        return;
    }

    e.preventDefault();

    /*
     * In some cases this will initiate browser text selection.
     * We've hijacked copying, so while it might be nice to allow copying part
     * of a cell, currently you'll always get the whole cell regardless of what
     * the browser thinks is selected.
     * And when you've selected multiple cells the browser selection is
     * completely wrong.
     */

function selectColumn(current_selection: string[], column: IColumn, columns: Columns, columnRowIndex: any, setProps: SetProps, mergeDuplicateHeaders: boolean, clearSelection: boolean, select: boolean) {
    // if 'single' and trying to click selected radio -> do nothing
    if (clearSelection && !select) {
        return () => { };
    }

    let selected_columns = actions.getAffectedColumns(column, columns, columnRowIndex, mergeDuplicateHeaders, true);

    if (clearSelection) {
        return () => setProps({ selected_columns });
    } else if (select) {
        // 'multi' + select -> add to selection (union)
        return () => setProps({
            selected_columns: R.union(current_selection, selected_columns)
        });
    } else {
        // 'multi' + unselect -> invert of intersection
        return () => setProps({
            selected_columns: R.without(selected_columns, current_selection)
        });
    }
}

// there should always be an active_cell if we got here...
            // but if for some reason there isn't, bail out rather than
            // doing something unexpected
            Logger.warning('Trying to change cell, but no cell is active.');
            return;
        }

        // If we are moving yank focus away from whatever input may still have
        // focus.
        // TODO There is a better way to handle native focus being out of sync
        // with the "is_focused" prop. We should find the better way.
        this.$el.focus();

        const hasSelection = selected_cells.length > 1;
        const isEnterOrTab =
            e.keyCode === KEY_CODES.ENTER || e.keyCode === KEY_CODES.TAB;

        // If we have a multi-cell selection and are using ENTER or TAB
        // move active cell within the selection context.
        if (hasSelection && isEnterOrTab) {
            const nextCell = this.getNextCell(e, {
                currentCell: active_cell,
                restrictToSelection: true
            });
            setProps({
                is_focused: false,
                active_cell: nextCell
            });
            return;
        } else if (!e.shiftKey) {
            // If we are not extending selection with shift and are
            // moving with navigation keys cancel selection and move.

setProps({
                is_focused: false,
                selected_cells: [nextCell],
                active_cell: nextCell,
                start_cell: nextCell,
                end_cell: nextCell
            });
            return;
        }

        // else we are navigating with arrow keys and extending selection
        // with shift.

        let { minRow, minCol, maxRow, maxCol } = selectionBounds(selected_cells);
        const selectingDown =
            e.keyCode === KEY_CODES.ARROW_DOWN || e.keyCode === KEY_CODES.ENTER;
        const selectingUp = e.keyCode === KEY_CODES.ARROW_UP;
        const selectingRight =
            e.keyCode === KEY_CODES.ARROW_RIGHT || e.keyCode === KEY_CODES.TAB;
        const selectingLeft = e.keyCode === KEY_CODES.ARROW_LEFT;
        let startRow = start_cell && start_cell.row;
        let startCol = start_cell && start_cell.column;
        let endRow = end_cell && end_cell.row;
        let endCol = end_cell && end_cell.column;

        if (selectingDown) {
            if (active_cell.row > minRow) {
                minRow++;
                endRow = minRow;
            } else if (maxRow < viewport.data.length - 1) {
                maxRow++;
                endRow = maxRow;

(state.tableProps.columns || []).forEach(column => {
        if (column.id === 'ccc') {
            column.name = ['Date', 'only'];
            column.type = ColumnType.Datetime;
            column.validation = { allow_YY: true };
            (state.tableProps.data || []).forEach((row, i) => {
                const d = new Date(Date.UTC(2018, 0, 1));
                // three day increment
                d.setUTCDate(3 * i + 1);
                // date only
                row.ccc = d.toISOString().substr(0, 10);
            });
        } else if (column.id === 'ddd') {
            column.name = ['Date', 'with', 'time'];
            column.type = ColumnType.Datetime;
            (state.tableProps.data || []).forEach((row, i) => {
                const d = new Date(Date.UTC(2018, 0, 1));
                // two hours and 11 seconds increment
                d.setUTCSeconds(i * 7211);
                // datetime ending with seconds

import React from 'react';
import { storiesOf } from '@storybook/react';

import DataTable from 'dash-table/dash/DataTable';
import { TableAction } from 'dash-table/components/Table/props';

const actions = [TableAction.Native, TableAction.Custom];

const setProps = () => { };

let stories = storiesOf('DashTable/Props Validation', module);

actions.forEach(filter => {
    actions.forEach(sort => {
        actions.forEach(page => {
            stories = stories.add(`filter=${filter}, sorting=${sort}, pagination=${page}`, () => ());
        });
    });

.add('"a" ascending -- empty string override', () => ())
    .add('"a" descending -- empty string override', () => (

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'}