-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
Grouping #2106
Grouping #2106
Conversation
/> | ||
{dragHandleProps && ( | ||
<div className="rdg-cell-drag-handle" {...dragHandleProps} /> | ||
{!column.rowGroup && ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rendering an empty cell for groupBy
columns
src/DataGrid.tsx
Outdated
@@ -232,6 +238,9 @@ function DataGrid<R, K extends keyof R, SR>({ | |||
const [isDragging, setDragging] = useState(false); | |||
const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined); | |||
|
|||
// TODO: change it to props |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure how to change it to props as the the keys are generated internally. The format is grandParentKey__parentKey__key__so on
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changed it to props for now.
src/DataGrid.tsx
Outdated
const hasGroups = groupBy.length > 0 && rowGrouper; | ||
|
||
if (hasGroups) { | ||
// TODO: finalize if these flags need to be supported on treegrid |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thoughts?
src/DataGrid.tsx
Outdated
@@ -722,11 +785,41 @@ function DataGrid<R, K extends keyof R, SR>({ | |||
} | |||
|
|||
function getViewportRows() { | |||
const rowElements = []; | |||
// TODO: cleanup rowIndex/rowIdx logic |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Need to revisit to make sure the algorithm is correct. Check useViewportRows
({ startRowIndex } = row); | ||
return ( | ||
<GroupRowRenderer<R, SR> | ||
aria-level={row.level + 1} // aria-level is 1-based |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// Select is always the first column | ||
const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level; | ||
|
||
function selectGroup() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://www.w3.org/TR/wai-aria-practices-1.1/examples/treegrid/treegrid-1.html
Check the Example Usage Options
section. Should we focus on both rows and cells?
stories/demos/CommonFeatures.tsx
Outdated
@@ -1,6 +1,7 @@ | |||
import React, { useState, useCallback, useMemo } from 'react'; | |||
import faker from 'faker'; | |||
import { AutoSizer } from 'react-virtualized'; | |||
import { groupBy as rowGrouper } from 'lodash'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I will create a separate story after the review
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
}); | ||
} | ||
|
||
return rows.sort((r1, r2) => r2.country.localeCompare(r1.country)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
groupBy
,rowGrouper
, andcolumn.groupFormatter
propsrowIdx
is no longer in sync withrows
as the grid groups the data internally. How should it be handled?rawRows.indexOf(rows[rowIdx] as R)
to get the correct indexgroupBy
columns are set as frozen columns and moved to the left (after the select column)aria
attributes fortreegrid
and fixarria-rowindex/aria-rowcount