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.

Sign up for GitHub

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

Jump to bottom

perf: add new rowTopOffsetRenderType grid option to use "transform" #1050

Merged
merged 2 commits into from
Aug 23, 2024
Merged

perf: add new rowTopOffsetRenderType grid option to use "transform" #1050

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8154f2b
feat: add new `rowTopOffsetRenderType` grid option to use "transform"
ghiscoding Aug 23, 2024
e144a3c
docs: add note about possible transform default in next major
ghiscoding Aug 23, 2024
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
Next Next commit
feat: add new rowTopOffsetRenderType grid option to use "transform"
  • Loading branch information
@ghiscoding
ghiscoding committed Aug 23, 2024
commit 8154f2be570929713adf8237ae89752bc4aea8c8
84 changes: 42 additions & 42 deletions cypress/e2e/example-frozen-rows.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,71 +22,71 @@ describe('Example - Frozen Rows', { retries: 1 }, () => {
});

it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 6 columns on the right', () => {
cy.get('[style="top: 0px;"]').should('have.length', 2); // top + bottom
cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11 * 2);
cy.get('[style="transform: translateY(0px);"]').should('have.length', 2); // top + bottom
cy.get('.grid-canvas-left > [style="transform: translateY(0px);"]').children().should('have.length', 11 * 2);

// top-left
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '0');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(1)').should('contain', 'Task 0');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(7)').should('contain', '0');

// bottom-left
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 49995');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '49995');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(1)').should('contain', 'Task 49995');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(7)').should('contain', '49995');
});

it('should change frozen row and increment by 1 and expect changes to be reflected in the grid', () => {
cy.get('input#frozenRow').type('{backspace}7');
cy.get('button#setFrozenRow').click();

cy.get('[style="top: 0px;"]').should('have.length', 2); // top + bottom
cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11 * 2);
cy.get('[style="transform: translateY(0px);"]').should('have.length', 2); // top + bottom
cy.get('.grid-canvas-left > [style="transform: translateY(0px);"]').children().should('have.length', 11 * 2);

// top-left
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '0');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(1)').should('contain', 'Task 0');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(7)').should('contain', '0');

// bottom-left
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 49993');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '49993');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(1)').should('contain', 'Task 49993');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(7)').should('contain', '49993');
});

it('should uncheck "frozen bottom rows" and set it', () => {
cy.get('input#frozenBottomRows').uncheck();
cy.get('button#setFrozenBottomRows').click();

cy.get('[style="top: 0px;"]').should('have.length', 2); // top + bottom
cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11 * 2);
cy.get('[style="transform: translateY(0px);"]').should('have.length', 2); // top + bottom
cy.get('.grid-canvas-left > [style="transform: translateY(0px);"]').children().should('have.length', 11 * 2);

// top-left
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '0');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(1)').should('contain', 'Task 0');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-top.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(7)').should('contain', '0');

// bottom-left
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 7');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '7');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(0)').should('contain', '');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(1)').should('contain', 'Task 7');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(2)').should('contain', '5 days');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
cy.get('.grid-canvas-bottom.grid-canvas-left > [style="transform: translateY(0px);"] > .slick-cell:nth(7)').should('contain', '7');
});
});
50 changes: 25 additions & 25 deletions cypress/e2e/example-grouping-esm.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,56 +25,56 @@ describe('Example - Grouping & Aggregators (ESM)', { retries: 1 }, () => {
cy.get('[data-test="group-duration-sort-value-btn"]').click();
cy.get('[data-test="collapse-all-btn"]').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 2');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 3');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 4');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 1');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 2');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 3');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 4}px);"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 4');
});

it('should click on Expand All columns and expect 1st row as grouping title and 2nd row as a regular row', () => {
cy.get('[data-test="add-50k-rows-btn"]').click();
cy.get('[data-test="group-duration-sort-value-btn"]').click();
cy.get('[data-test="expand-all-btn"]').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task');
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '0');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(1)`).should('contain', 'Task');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(2)`).should('contain', '0');
});

it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be collapsed and 3rd row to have group totals', () => {
cy.get('[data-test="group-duration-effort-btn"]').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: True');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: True');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should('contain', 'total: 0');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should('contain', 'total: 0');
});

it('should "Group by Duration then Effort-Driven then Percent" and expect fist 2 rows to be expanded, 3rd row to be collapsed then 4th row to have group total', () => {
cy.get('[data-test="group-duration-effort-percent-btn"]').click();

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration: 0');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False');
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven: False');

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/);

cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^avg: [0-9]%$/);
cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2`)
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^avg: [0-9]%$/);
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"].slick-group-totals.slick-group-level-2`)
.find('.slick-cell:nth(3)').contains('avg: ');
});
});
Expand Down
11 changes: 10 additions & 1 deletion examples/example-frozen-rows.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,16 @@ <h2>Demonstrates:</h2>
];

var options = {
editable: true, enableAddRow: false, enableCellNavigation: true, asyncEditorLoading: true, forceFitColumns: false, autoEdit: false, topPanelHeight: 25, frozenRow: 5, frozenBottom: true
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: true,
forceFitColumns: false,
autoEdit: false,
topPanelHeight: 25,
frozenRow: 5,
frozenBottom: true,
rowTopOffsetRenderType: 'transform' // defaults: 'top'
};

var sortcol = "title";
Expand Down
4 changes: 3 additions & 1 deletion examples/example-grouping-esm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,9 @@ <h2>View Source:</h2>
let options = {
enableCellNavigation: true,
editable: true,
rowHeight: 28
rowHeight: 28,
// forceSyncScrolling: true,
rowTopOffsetRenderType: 'transform' // defaults: 'top'
};

let sortcol = "title";
Expand Down
Loading