Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dash/datagrid2 #21182

Draft
wants to merge 144 commits into
base: master
Choose a base branch
from
Draft

dash/datagrid2 #21182

wants to merge 144 commits into from

Conversation

vazonik
Copy link
Member

@vazonik vazonik commented May 16, 2024

Improved version of the DataGrid.

Main changes:

  • new code architecture
  • columns resizing
  • smooth scrolling
  • strict or auto row heights
  • strongly CSS-customizable
  • better columns management
  • column distribution (full or fixed)
  • destroy & load methods
  • title
  • no data row

@highsoft-bot
Copy link
Collaborator

highsoft-bot commented May 16, 2024

File size comparison

Sizes for compiled+gzipped (bold) and compiled files.

master candidate difference
datagrid/datagrid.js 25.1 kB
77.8 kB
29.3 kB
95.5 kB
4370 B
18099 B

@highsoft-bot
Copy link
Collaborator

Visual test results - No difference found


if (value !== void 0) {
if (key === 'style') {
Object.assign(element.style, value);
Copy link
Contributor

Choose a reason for hiding this comment

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

Spread operator should be faster.

ts/DataGrid/DataGrid2/Utils.ts Show resolved Hide resolved
Copy link
Contributor

@karolkolodziej karolkolodziej left a comment

Choose a reason for hiding this comment

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

Great work!

  1. When writing api docs please stick to the convention:
    /**
     * Constructs a row in the data grid.
     *
     * @param dataGrid 
     * The data grid instance which the row belongs to.
     *
     * @param index 
     * The index of the row in the data table.
     */
  1. I would like to have some convention about the class lifecycle methods:
  • have "light" constructor that calls init
  • init should set some basic options and call load and/or render
  • update method is missing
  • reflow I don't like it, buf if we need it let's keep it
  • destroy is missing?

ts/DataGrid/DataGrid2/DataGridColumn.ts Outdated Show resolved Hide resolved
ts/DataGrid/DataGrid2/DataGridCell.ts Show resolved Hide resolved
ts/DataGrid/DataGrid2/DataGridRow.ts Outdated Show resolved Hide resolved
ts/DataGrid/DataGrid2/DataGridTable.ts Outdated Show resolved Hide resolved
delete this.column.viewport.editedCell;

parentNode.classList.remove(Globals.classNames.focusedCell);
parentNode.innerHTML = this.formatCell(cellValue);

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML Medium

DOM text
is reinterpreted as HTML without escaping meta-characters.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants