Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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': {
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'}
],
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;
}
}
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;
}
}
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),