Skip to content

Commit b045462

Browse files
Marc-Andre-RivetMarc-Andre-Rivet
committed
Styling as listview (plotly#179)
* - listview styling - column name nested prop update (support array of strings) - fix errors in demo app * bump version, update changelog * revert demo change
1 parent 8e6a8af commit b045462

File tree

12 files changed

+183
-75
lines changed

12 files changed

+183
-75
lines changed

‎packages/dash-table/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -402,10 +402,15 @@ Derived properties allow the component to expose complex state that can be usefu
402402
Issue: https://github.com/plotly/dash-table/issues/143
403403

404404
## RC9 - Sort ascending on first click
405+
405406
- Sorts ascending when first clicked, [#118](https://github.com/plotly/dash-table/issues/118)
406407
- Flips icons displayed so that they are pointing up on ascending and down on descending.
407408
Issue: https://github.com/plotly/dash-table/issues/143
408409

409410
## RC10 - Improved props docstrings
410411

411412
Issue: https://github.com/plotly/dash-table/issues/163
413+
414+
## RC11 - Style as list view
415+
416+
- Fix regressions linked to the style_as_list_view feature / prop

‎packages/dash-table/dash_table/bundle.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/dash-table/dash_table/demo.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/dash-table/dash_table/metadata.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -363,7 +363,11 @@
363363
"name": "bool"
364364
},
365365
"required": false,
366-
"description": "DEPRECATED"
366+
"description": "If True, then the table will be styled like a list view\nand not have borders between the columns.",
367+
"defaultValue": {
368+
"value": "false",
369+
"computed": false
370+
}
367371
},
368372
"pagination_mode": {
369373
"type": {

‎packages/dash-table/dash_table/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "dash-table",
3-
"version": "3.1.0rc10",
3+
"version": "3.1.0rc11",
44
"description": "Dash table",
55
"main": "build/index.js",
66
"scripts": {

‎packages/dash-table/demo/App.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint no-magic-numbers: 0 */
22
import * as R from 'ramda';
33
import React, {Component} from 'react';
4-
import PropTypes from 'prop-types';
54
import { Table } from 'dash-table';
65
import {mockData} from './data';
76
import { memoizeOne } from 'core/memoizer';
@@ -22,6 +21,7 @@ class App extends Component {
2221
id: 'table',
2322
data,
2423
columns: clone(mockData.columns).map(col => R.merge(col, {
24+
name: col.name || col.id,
2525
editable_name: true,
2626
deletable: true
2727
// type: 'dropdown'

‎packages/dash-table/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "dash-table",
3-
"version": "3.1.0rc10",
3+
"version": "3.1.0rc11",
44
"description": "Dash table",
55
"main": "build/index.js",
66
"scripts": {

‎packages/dash-table/src/dash-table/Table.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export const defaultProps = {
6161
sorting: false,
6262
sorting_type: 'single',
6363
sorting_settings: [],
64+
style_as_list_view: false,
6465

6566
derived_viewport_data: [],
6667
derived_viewport_indices: [],
@@ -395,7 +396,8 @@ export const propTypes = {
395396
start_cell: PropTypes.arrayOf(PropTypes.number),
396397

397398
/**
398-
* DEPRECATED
399+
* If True, then the table will be styled like a list view
400+
* and not have borders between the columns.
399401
*/
400402
style_as_list_view: PropTypes.bool,
401403

@@ -736,4 +738,4 @@ export const propTypes = {
736738
};
737739

738740
Table.defaultProps = defaultProps;
739-
Table.propTypes = propTypes;
741+
Table.propTypes = propTypes;

‎packages/dash-table/src/dash-table/components/ControlledTable/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -599,6 +599,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
599599
content_style,
600600
n_fixed_columns,
601601
n_fixed_rows,
602+
style_as_list_view,
602603
style_table
603604
} = this.props;
604605

@@ -607,6 +608,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
607608
'dash-spreadsheet',
608609
...(n_fixed_rows ? ['dash-freeze-top'] : []),
609610
...(n_fixed_columns ? ['dash-freeze-left'] : []),
611+
...(style_as_list_view ? ['dash-list-view'] : []),
610612
[`dash-${content_style}`]
611613
];
612614

@@ -615,6 +617,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
615617
'dash-spreadsheet-container',
616618
...(n_fixed_rows ? ['dash-freeze-top'] : []),
617619
...(n_fixed_columns ? ['dash-freeze-left'] : []),
620+
...(style_as_list_view ? ['dash-list-view'] : []),
618621
[`dash-${content_style}`]
619622
];
620623

‎packages/dash-table/src/dash-table/components/Table/Table.less

+110-62
Original file line numberDiff line numberDiff line change
@@ -12,35 +12,131 @@
1212
0px @bottom 0px 0px @color;
1313
}
1414

15-
.top-left-cells() {
16-
.left-cells();
17-
.top-cells();
15+
.top-left-cells(@isListView) {
16+
.left-cells(@isListView);
17+
.top-cells(@isListView);
1818

1919
tr:first-of-type {
2020
td:first-of-type,
2121
th:first-of-type {
22-
.inset-shadow(var(--border), 1px, 1px, -1px, -1px);
22+
& when (@isListView = True) {
23+
.inset-shadow(var(--border), 0px, 1px, 0px, -1px);
24+
}
25+
26+
& when (@isListView = False) {
27+
.inset-shadow(var(--border), 1px, 1px, -1px, -1px);
28+
}
2329
}
2430
}
2531
}
2632

27-
.top-cells() {
33+
.top-cells(@isListView) {
2834
tr:first-of-type {
2935
td, th {
30-
.inset-shadow(var(--border), 0px, 1px, -1px, -1px);
36+
& when (@isListView = True) {
37+
.inset-shadow(var(--border), 0px, 1px, 0px, -1px);
38+
}
39+
40+
& when (@isListView = False) {
41+
.inset-shadow(var(--border), 0px, 1px, -1px, -1px);
42+
}
3143
}
3244
}
3345
}
3446

35-
.left-cells() {
47+
.left-cells(@isListView) {
3648
tr {
3749
td:first-of-type,
3850
th:first-of-type {
39-
.inset-shadow(var(--border), 1px, 0px, -1px, -1px);
51+
& when (@isListView = True) {
52+
.inset-shadow(var(--border), 0px, 0px, 0px, -1px);
53+
}
54+
55+
& when (@isListView = False) {
56+
.inset-shadow(var(--border), 1px, 0px, -1px, -1px);
57+
}
58+
4059
}
4160
}
4261
}
4362

63+
.dash-borders(@isListView) {
64+
&:not(.dash-freeze-top):not(.dash-freeze-left) {
65+
.cell-1-1 {
66+
.top-left-cells(@isListView);
67+
}
68+
}
69+
70+
&:not(.dash-freeze-top).dash-freeze-left {
71+
.cell-1-0 {
72+
.top-left-cells(@isListView);
73+
}
74+
75+
.cell-1-1 {
76+
.top-cells(@isListView);
77+
}
78+
}
79+
80+
&.dash-freeze-top:not(.dash-freeze-left) {
81+
.cell-0-1 {
82+
.top-left-cells(@isListView);
83+
}
84+
85+
.cell-1-1 {
86+
.left-cells(@isListView);
87+
}
88+
}
89+
90+
&.dash-freeze-top.dash-freeze-left {
91+
.cell-0-0 {
92+
.top-left-cells(@isListView);
93+
}
94+
95+
.cell-0-1 {
96+
.top-cells(@isListView);
97+
}
98+
99+
.cell-1-0 {
100+
.left-cells(@isListView);
101+
}
102+
}
103+
104+
td, th {
105+
& when (@isListView = True) {
106+
.inset-shadow(var(--border), 0px, 0px, 0px, -1px);
107+
}
108+
109+
& when (@isListView = False) {
110+
.inset-shadow(var(--border), 0px, 0px, -1px, -1px);
111+
}
112+
113+
&:focus {
114+
outline: none;
115+
}
116+
}
117+
118+
td.focused {
119+
& when (@isListView = True) {
120+
.inset-shadow(var(--accent), 0px, 0px, 0px, -1px);
121+
}
122+
123+
& when (@isListView = False) {
124+
.outline-shadow(var(--accent), 1px, 1px, 0, 0);
125+
border: 1px solid var(--accent);
126+
}
127+
}
128+
129+
.dash-filter.invalid {
130+
& when (@isListView = True) {
131+
.inset-shadow(red, 0px, 0px, 0px, -1px);
132+
}
133+
134+
& when (@isListView = False) {
135+
.inset-shadow(red, 1px, 1px, -1px, -1px);
136+
}
137+
}
138+
}
139+
44140
.fit-content-polyfill() {
45141
width: auto; // MS Edge, IE
46142
width: fit-content; // Chrome
@@ -162,61 +258,16 @@
162258
}
163259
}
164260

165-
&:not(.dash-freeze-top):not(.dash-freeze-left) {
166-
.cell-1-1 {
167-
.top-left-cells();
168-
}
261+
&:not(.dash-list-view) {
262+
.dash-borders(False);
169263
}
170264

171-
&:not(.dash-freeze-top).dash-freeze-left {
172-
.cell-1-0 {
173-
.top-left-cells();
174-
}
175-
176-
.cell-1-1 {
177-
.top-cells();
178-
}
265+
&.dash-list-view {
266+
.dash-borders(True);
179267
}
180268

181-
&.dash-freeze-top:not(.dash-freeze-left) {
182-
.cell-0-1 {
183-
.top-left-cells();
184-
}
185-
186-
.cell-1-1 {
187-
.left-cells();
188-
}
189-
}
190-
191-
&.dash-freeze-top.dash-freeze-left {
192-
.cell-0-0 {
193-
.top-left-cells();
194-
}
195-
196-
.cell-0-1 {
197-
.top-cells();
198-
}
199-
200-
.cell-1-0 {
201-
.left-cells();
202-
}
203-
}
204-
205-
.cell {
206-
td, th {
207-
.inset-shadow(var(--border), 0px, 0px, -1px, -1px);
208-
209-
&:focus {
210-
outline: none;
211-
}
212-
}
213-
}
214-
215-
.filter {
216-
&.invalid {
217-
.inset-shadow(red, 1px, 1px, -1px, -1px);
218-
background-color: pink;
219-
}
269+
.dash-filter.invalid {
270+
background-color: pink;
220271
}
221272

222273
.selected-row {
@@ -237,9 +288,6 @@
237288
}
238289

239290
&.focused {
240-
// .shadow(red, 1px, 1px, 0, 0);
241-
.outline-shadow(var(--accent), 1px, 1px, 0, 0);
242-
border: 1px solid var(--accent);
243291
margin: -1px;
244292
z-index: 200;
245293
}

‎packages/dash-table/src/dash-table/components/Table/props.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export interface IVisibleColumn {
5757
editable?: boolean;
5858
editable_name?: boolean | number;
5959
id: ColumnId;
60-
name: string;
60+
name: string | string[];
6161
options?: { label: string | number, value: string | number }[]; // legacy
6262
type?: ColumnType;
6363
}
@@ -136,6 +136,7 @@ interface IProps {
136136
sorting_settings?: SortSettings;
137137
sorting_type?: SortingType;
138138
sorting_treat_empty_string_as_none?: boolean;
139+
style_as_list_view?: boolean;
139140
pagination_mode?: PaginationMode;
140141
pagination_settings?: IPaginationSettings;
141142

@@ -176,6 +177,7 @@ interface IDefaultProps {
176177
sorting_settings: SortSettings;
177178
sorting_type: SortingType;
178179
sorting_treat_empty_string_as_none: boolean;
180+
style_as_list_view: boolean;
179181

180182
pagination_mode: PaginationMode;
181183
pagination_settings: IPaginationSettings;

0 commit comments

Comments
 (0)