Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Styling as listview #179

Merged
Marc-Andre-Rivet merged 4 commits into from
Oct 25, 2018
Merged

Styling as listview #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3989e19
- listview styling
Oct 25, 2018
cffd6da
bump version, update changelog
Oct 25, 2018
c51a0a5
revert demo change
Oct 25, 2018
d4817a6
Merge remote-tracking branch 'origin/master' into 3.1-styling-as-list…
Oct 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,10 +402,15 @@ Derived properties allow the component to expose complex state that can be usefu
Issue: https://github.com/plotly/dash-table/issues/143

## RC9 - Sort ascending on first click

- Sorts ascending when first clicked, [#118](https://github.com/plotly/dash-table/issues/118)
- Flips icons displayed so that they are pointing up on ascending and down on descending.
Issue: https://github.com/plotly/dash-table/issues/143

## RC10 - Improved props docstrings

Issue: https://github.com/plotly/dash-table/issues/163

## RC11 - Style as list view

- Fix regressions linked to the style_as_list_view feature / prop
6 changes: 3 additions & 3 deletions dash_table/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions dash_table/demo.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion dash_table/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,11 @@
"name": "bool"
},
"required": false,
"description": "DEPRECATED"
"description": "If True, then the table will be styled like a list view\nand not have borders between the columns.",
"defaultValue": {
"value": "false",
"computed": false
}
},
"pagination_mode": {
"type": {
Expand Down
2 changes: 1 addition & 1 deletion dash_table/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dash-table",
"version": "3.1.0rc10",
"version": "3.1.0rc11",
"description": "Dash table",
"main": "build/index.js",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion demo/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint no-magic-numbers: 0 */
import * as R from 'ramda';
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { Table } from 'dash-table';
import {mockData} from './data';
import { memoizeOne } from 'core/memoizer';
Expand All @@ -22,6 +21,7 @@ class App extends Component {
id: 'table',
data,
columns: clone(mockData.columns).map(col => R.merge(col, {
name: col.name || col.id,

@Marc-Andre-Rivet Marc-Andre-Rivet Oct 25, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixing react warnings that appeared after tightening the column props

editable_name: true,
deletable: true
// type: 'dropdown'
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dash-table",
"version": "3.1.0rc10",
"version": "3.1.0rc11",
"description": "Dash table",
"main": "build/index.js",
"scripts": {
Expand Down
6 changes: 4 additions & 2 deletions src/dash-table/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export const defaultProps = {
sorting: false,
sorting_type: 'single',
sorting_settings: [],
style_as_list_view: false,

derived_viewport_data: [],
derived_viewport_indices: [],
Expand Down Expand Up @@ -395,7 +396,8 @@ export const propTypes = {
start_cell: PropTypes.arrayOf(PropTypes.number),

/**
* DEPRECATED
* If True, then the table will be styled like a list view
* and not have borders between the columns.
*/
style_as_list_view: PropTypes.bool,

Expand Down Expand Up @@ -736,4 +738,4 @@ export const propTypes = {
};

Table.defaultProps = defaultProps;
Table.propTypes = propTypes;
Table.propTypes = propTypes;
3 changes: 3 additions & 0 deletions src/dash-table/components/ControlledTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -599,6 +599,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps,
content_style,
n_fixed_columns,
n_fixed_rows,
style_as_list_view,
style_table
} = this.props;

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

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

Expand Down
172 changes: 110 additions & 62 deletions src/dash-table/components/Table/Table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,35 +12,131 @@
0px @bottom 0px 0px @color;
}

.top-left-cells() {
.left-cells();
.top-cells();
.top-left-cells(@isListView) {
.left-cells(@isListView);
.top-cells(@isListView);

tr:first-of-type {
td:first-of-type,
th:first-of-type {
.inset-shadow(var(--border), 1px, 1px, -1px, -1px);
& when (@isListView = True) {
.inset-shadow(var(--border), 0px, 1px, 0px, -1px);
}

& when (@isListView = False) {
.inset-shadow(var(--border), 1px, 1px, -1px, -1px);
}
}
}
}

.top-cells() {
.top-cells(@isListView) {
tr:first-of-type {
td, th {
.inset-shadow(var(--border), 0px, 1px, -1px, -1px);
& when (@isListView = True) {
.inset-shadow(var(--border), 0px, 1px, 0px, -1px);
}

& when (@isListView = False) {
.inset-shadow(var(--border), 0px, 1px, -1px, -1px);
}
}
}
}

.left-cells() {
.left-cells(@isListView) {
tr {
td:first-of-type,
th:first-of-type {
.inset-shadow(var(--border), 1px, 0px, -1px, -1px);
& when (@isListView = True) {
.inset-shadow(var(--border), 0px, 0px, 0px, -1px);
}

& when (@isListView = False) {
.inset-shadow(var(--border), 1px, 0px, -1px, -1px);
}

}
}
}

.dash-borders(@isListView) {
&:not(.dash-freeze-top):not(.dash-freeze-left) {
.cell-1-1 {
.top-left-cells(@isListView);
}
}

&:not(.dash-freeze-top).dash-freeze-left {
.cell-1-0 {
.top-left-cells(@isListView);
}

.cell-1-1 {
.top-cells(@isListView);
}
}

&.dash-freeze-top:not(.dash-freeze-left) {
.cell-0-1 {
.top-left-cells(@isListView);
}

.cell-1-1 {
.left-cells(@isListView);
}
}

&.dash-freeze-top.dash-freeze-left {
.cell-0-0 {
.top-left-cells(@isListView);
}

.cell-0-1 {
.top-cells(@isListView);
}

.cell-1-0 {
.left-cells(@isListView);
}
}

td, th {
& when (@isListView = True) {
.inset-shadow(var(--border), 0px, 0px, 0px, -1px);
}

& when (@isListView = False) {
.inset-shadow(var(--border), 0px, 0px, -1px, -1px);
}

&:focus {
outline: none;
}
}

td.focused {
& when (@isListView = True) {
.inset-shadow(var(--accent), 0px, 0px, 0px, -1px);
}

& when (@isListView = False) {
.outline-shadow(var(--accent), 1px, 1px, 0, 0);
border: 1px solid var(--accent);
}
}

.dash-filter.invalid {
& when (@isListView = True) {
.inset-shadow(red, 0px, 0px, 0px, -1px);
}

& when (@isListView = False) {
.inset-shadow(red, 1px, 1px, -1px, -1px);
}

@Marc-Andre-Rivet Marc-Andre-Rivet Oct 25, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

td.focused and .dash-filter.invalid styling moved here to make isListView variable available

}
}

@Marc-Andre-Rivet Marc-Andre-Rivet Oct 25, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving the block of code related to styling the cells and making it a mixin that accepts one parameter (isListView) -- follow up styling and mixin calls is based on that variable

.fit-content-polyfill() {
width: auto; // MS Edge, IE
width: fit-content; // Chrome
Expand Down Expand Up @@ -162,61 +258,16 @@
}
}

&:not(.dash-freeze-top):not(.dash-freeze-left) {
.cell-1-1 {
.top-left-cells();
}
&:not(.dash-list-view) {
.dash-borders(False);
}

&:not(.dash-freeze-top).dash-freeze-left {
.cell-1-0 {
.top-left-cells();
}

.cell-1-1 {
.top-cells();
}
&.dash-list-view {
.dash-borders(True);
}

&.dash-freeze-top:not(.dash-freeze-left) {
.cell-0-1 {
.top-left-cells();
}

.cell-1-1 {
.left-cells();
}
}

&.dash-freeze-top.dash-freeze-left {
.cell-0-0 {
.top-left-cells();
}

.cell-0-1 {
.top-cells();
}

.cell-1-0 {
.left-cells();
}
}

.cell {
td, th {
.inset-shadow(var(--border), 0px, 0px, -1px, -1px);

&:focus {
outline: none;
}
}
}

.filter {
&.invalid {
.inset-shadow(red, 1px, 1px, -1px, -1px);
background-color: pink;
}
.dash-filter.invalid {
background-color: pink;
}

.selected-row {
Expand All @@ -237,9 +288,6 @@
}

&.focused {
// .shadow(red, 1px, 1px, 0, 0);
.outline-shadow(var(--accent), 1px, 1px, 0, 0);
border: 1px solid var(--accent);
margin: -1px;

@Marc-Andre-Rivet Marc-Andre-Rivet Oct 25, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Style fragments unaffected by table style are left as is.

z-index: 200;
}
Expand Down
4 changes: 3 additions & 1 deletion src/dash-table/components/Table/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export interface IVisibleColumn {
editable?: boolean;
editable_name?: boolean | number;
id: ColumnId;
name: string;
name: string | string[];

@Marc-Andre-Rivet Marc-Andre-Rivet Oct 25, 2018 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

array of strings support

options?: { label: string | number, value: string | number }[]; // legacy
type?: ColumnType;
}
Expand Down Expand Up @@ -136,6 +136,7 @@ interface IProps {
sorting_settings?: SortSettings;
sorting_type?: SortingType;
sorting_treat_empty_string_as_none?: boolean;
style_as_list_view?: boolean;

@Marc-Andre-Rivet Marc-Andre-Rivet Oct 25, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adding this back

pagination_mode?: PaginationMode;
pagination_settings?: IPaginationSettings;

Expand Down Expand Up @@ -176,6 +177,7 @@ interface IDefaultProps {
sorting_settings: SortSettings;
sorting_type: SortingType;
sorting_treat_empty_string_as_none: boolean;
style_as_list_view: boolean;

pagination_mode: PaginationMode;
pagination_settings: IPaginationSettings;
Expand Down
Loading