Skip to content

Conversation

amanmahajan7
Copy link
Collaborator

@amanmahajan7 amanmahajan7 commented Jul 30, 2020

  • Finalize grouping API
    • Added groupBy, rowGrouper, and column.groupFormatter props
  • rowIdx is no longer in sync with rows as the grid groups the data internally. How should it be handled?
    • Using rawRows.indexOf(rows[rowIdx] as R) to get the correct index
  • Should dragging be allowed
    • Disabled dragging and copy/paste when grouping is enabled
  • Should we freeze the groupBy column?
    • groupBy columns are set as frozen columns and moved to the left (after the select column)
  • Add aria attributes for treegrid and fix arria-rowindex/aria-rowcount
  • Should both row and cell be selected on the group row?
    • Added row selection logic similar to the treegrid example

@amanmahajan7 amanmahajan7 marked this pull request as ready for review August 17, 2020 12:52
@amanmahajan7 amanmahajan7 self-assigned this Aug 18, 2020
/>
{dragHandleProps && (
<div className="rdg-cell-drag-handle" {...dragHandleProps} />
{!column.rowGroup && (
Copy link
Collaborator Author

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
const [isDragging, setDragging] = useState(false);
const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);

// TODO: change it to props
Copy link
Collaborator Author

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

Copy link
Collaborator Author

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
Copy link
Collaborator Author

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

function getViewportRows() {
const rowElements = [];
// TODO: cleanup rowIndex/rowIdx logic
Copy link
Collaborator Author

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
Copy link
Collaborator Author

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() {
Copy link
Collaborator Author

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?

import React, { useState, useCallback, useMemo } from 'react';
import faker from 'faker';
import { AutoSizer } from 'react-virtualized';
import { groupBy as rowGrouper } from 'lodash';
Copy link
Collaborator Author

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

amanmahajan7 and others added 8 commits September 2, 2020 09:11
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));
Copy link
Collaborator

Choose a reason for hiding this comment

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

amanmahajan7 and others added 6 commits September 2, 2020 12:42
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>
@amanmahajan7 amanmahajan7 merged commit e8e950d into canary Sep 2, 2020
@amanmahajan7 amanmahajan7 deleted the am-group branch September 2, 2020 18:22
@amanmahajan7 amanmahajan7 restored the am-group branch June 28, 2021 21:12
@amanmahajan7 amanmahajan7 deleted the am-group branch July 22, 2021 13:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants