Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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'}
.add('with 1 column', () => ())
.add('row padding', () => (
}
},
{
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: {
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', () => (
.add('green if table is not editable', () => ())
.add('first column is editable and blue', () => (
.add('with 1 column', () => ())
.add('row padding', () => (
{
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)
},
{
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;
}
}
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
)
}
]);
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
};
}
}