Skip to content

Add Tree Grid Component #2181

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

Closed
wants to merge 19 commits into from
Closed

Add Tree Grid Component #2181

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
159f67f
Add Basic Rending for Tree Grid
aswinshenoy Jul 17, 2019
595c3ed
Added Support for Nested Rows
aswinshenoy Jul 17, 2019
60339b4
Add Support for Selection
aswinshenoy Jul 18, 2019
367ff3b
Merge branch 'master' of https://github.com/salesforce/design-system-…
aswinshenoy Aug 5, 2019
5038e4a
Update TreeGrid Props to match DataTable
aswinshenoy Aug 9, 2019
16040a9
Add Support for Headless TreeGrid Variant
aswinshenoy Aug 9, 2019
789638e
Update Headless Example
aswinshenoy Aug 13, 2019
7b51c8d
Support for basic Selection in TreeGrid
aswinshenoy Aug 16, 2019
647ddd2
Support for basic Selection in TreeGrid
aswinshenoy Aug 16, 2019
07ee9f5
Change props to support normalized data for TreeGrid
aswinshenoy Aug 20, 2019
72f02af
Support for SelectAll, MoreActionsDropdown Support for Rows
aswinshenoy Aug 21, 2019
5aa8534
Merge branch 'master' of https://github.com/salesforce/design-system-…
aswinshenoy Aug 21, 2019
d0f48a4
Add support for selection
aswinshenoy Aug 23, 2019
db6dbcf
Add basic support for keyboard navigation
aswinshenoy Aug 25, 2019
515f34e
Add Component.json
aswinshenoy Sep 9, 2019
8fb89bc
Merge branch 'master' of https://github.com/salesforce/design-system-…
aswinshenoy Sep 9, 2019
f3f9b9c
Support for indeterminate state of checkbox for top-level rows
aswinshenoy Sep 12, 2019
a52fec1
Add more examples for TreeGrid
aswinshenoy Sep 12, 2019
8ad82e2
Add EventTrap for handling selection & expansion of rows in TreeGrid
aswinshenoy Sep 13, 2019
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
18 changes: 18 additions & 0 deletions components/tree-grid/__docs__/storybook-stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { TREE_GRID } from '../../../utilities/constants';
import Default from '../__examples__/default';
import Nested from '../__examples__/nested';
import PreSelected from '../__examples__/pre-selected';
import SingleSelect from '../__examples__/single-select';


storiesOf(TREE_GRID, module)
.addDecorator((getStory) => (
<div className="slds-p-around_medium">{getStory()}</div>
))
.add('Default', () => <Default />)
.add('w/ Nesting', () => <Nested />)
.add('w/ Pre-Selection', () => <PreSelected />)
.add('w/ Single Select', () => <SingleSelect />);

133 changes: 133 additions & 0 deletions components/tree-grid/__examples__/default.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import React from 'react';
import TreeGrid from '~/components/tree-grid';
import IconSettings from '~/components/icon-settings';

const data = {
Copy link
Contributor

Choose a reason for hiding this comment

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

If there were no nested rows, then a dev would use a DataTable. I don't think we need this example and base should be nested.

cols: [
{
id: '1',
label: 'Account Name',
href: 'javascript:void(0);',
},
{
id: '2',
label: 'Employees',
href: 'javascript:void(0);',
},
{
id: '3',
label: 'Phone Number',
href: 'javascript:void(0);',
},
{
id: '4',
label: 'Account Owner',
href: 'javascript:void(0);',
},
{
id: '5',
label: 'Billing City',
href: 'javascript:void(0);',
},
],
rows: [
{
id: '1',
cols: [
{
label: 'Rewis Inc',
},
{
label: '3100',
},
{
label: '837-555-1212',
},
{
label: 'Jane Doe',
href: 'javascript:void(0);',
},
{
label: 'Phoenix, AZ',
},
],
},
{
id: '2',
cols: [
{
label: 'Acme Corporation',
},
{
label: '10000',
},
{
label: '837-555-1212',
},
{
label: 'Jane Doe',
href: 'javascript:void(0);',
},
{
label: 'San Francisco, CA',
},
],
},
{
id: '3',
cols: [
{
label: 'Rohde Enterprises',
},
{
label: '6000',
},
{
label: '837-555-1212',
},
{
label: 'Jane Doe',
href: 'javascript:void(0);',
},
{
label: 'New York, NY',
},
],
},
{
id: '4',
cols: [
{
label: 'Cheese Corp',
},
{
label: '1234',
},
{
label: '837-555-1212',
},
{
label: 'Jane Doe',
href: 'javascript:void(0);',
},
{
label: 'Paris, France',
},
],
},
],
};

class Example extends React.Component {
static displayName = 'treeGridExample';

render() {
return (
<IconSettings iconPath="/assets/icons">
<TreeGrid data={data} />
</IconSettings>
);
}
}

export default Example;
156 changes: 156 additions & 0 deletions components/tree-grid/__examples__/nested.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
import React from 'react';
import TreeGrid from '~/components/tree-grid';
import IconSettings from '~/components/icon-settings';

const data = {
Copy link
Contributor

Choose a reason for hiding this comment

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

The columns should be child components. See DataTable component.

Copy link
Contributor

Choose a reason for hiding this comment

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

Here is the Lightning component data for instance.

({ // eslint-disable-line
    init: function (cmp) {
        var columns = [
            {
                type: 'text',
                fieldName: 'accountName',
                label: 'Account Name',
                initialWidth: 300
            },
            {
                type: 'number',
                fieldName: 'employees',
                label: 'Employees'
            },
            {
                type: 'phone',
                fieldName: 'phone',
                label: 'Phone Number'
            },
            {
                type: 'url',
                fieldName: 'accountOwner',
                label: 'Account Owner',
                typeAttributes: {
                    label: { fieldName: 'accountOwnerName' }
                }
            },
            {
                type: 'text',
                fieldName: 'billingCity',
                label: 'Billing City'
            }
        ];

        cmp.set('v.gridColumns', columns);

        // data
        var nestedData = [
            {
                "name": "123555",
                "accountName": "Rewis Inc",
                "employees": 3100,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/jane-doe",
                "accountOwnerName": "Jane Doe",
                "billingCity": "Phoeniz, AZ"
            },

            {
                "name": "123556",
                "accountName": "Acme Corporation",
                "employees": 10000,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "San Francisco, CA",
                "_children": [
                    {
                        "name": "123556-A",
                        "accountName": "Acme Corporation (Bay Area)",
                        "employees": 3000,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "New York, NY",
                        "_children": [
                            {
                                "name": "123556-A-A",
                                "accountName": "Acme Corporation (Oakland)",
                                "employees": 745,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/john-doe",
                                "accountOwnerName": "John Doe",
                                "billingCity": "New York, NY"
                            },
                            {
                                "name": "123556-A-B",
                                "accountName": "Acme Corporation (San Francisco)",
                                "employees": 578,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/jane-doe",
                                "accountOwnerName": "Jane Doe",
                                "billingCity": "Los Angeles, CA"
                            }
                        ]
                    },

                    {
                        "name": "123556-B",
                        "accountName": "Acme Corporation (East)",
                        "employees": 430,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "San Francisco, CA",
                        "_children": [
                            {
                                "name": "123556-B-A",
                                "accountName": "Acme Corporation (NY)",
                                "employees": 1210,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/jane-doe",
                                "accountOwnerName": "Jane Doe",
                                "billingCity": "New York, NY"
                            },
                            {
                                "name": "123556-B-B",
                                "accountName": "Acme Corporation (VA)",
                                "employees": 410,
                                "phone": "837-555-1212",
                                "accountOwner": "http://example.com/john-doe",
                                "accountOwnerName": "John Doe",
                                "billingCity": "New York, NY",
                                "_children": [
                                    {
                                        "name": "123556-B-B-A",
                                        "accountName": "Allied Technologies",
                                        "employees": 390,
                                        "phone": "837-555-1212",
                                        "accountOwner": "http://example.com/jane-doe",
                                        "accountOwnerName": "Jane Doe",
                                        "billingCity": "Los Angeles, CA",
                                        "_children": [
                                            {
                                                "name": "123556-B-B-A-A",
                                                "accountName": "Allied Technologies (UV)",
                                                "employees": 270,
                                                "phone": "837-555-1212",
                                                "accountOwner": "http://example.com/john-doe",
                                                "accountOwnerName": "John Doe",
                                                "billingCity": "San Francisco, CA"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },

            {
                "name": "123557",
                "accountName": "Rhode Enterprises",
                "employees": 6000,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "New York, NY",
                "_children": [
                    {
                        "name": "123557-A",
                        "accountName": "Rhode Enterprises (UCA)",
                        "employees": 2540,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "New York, NY"
                    }
                ]
            },

            {
                "name": "123558",
                "accountName": "Tech Labs",
                "employees": 1856,
                "phone": "837-555-1212",
                "accountOwner": "http://example.com/john-doe",
                "accountOwnerName": "John Doe",
                "billingCity": "New York, NY",
                "_children": [
                    {
                        "name": "123558-A",
                        "accountName": "Opportunity Resources Inc",
                        "employees": 1934,
                        "phone": "837-555-1212",
                        "accountOwner": "http://example.com/john-doe",
                        "accountOwnerName": "John Doe",
                        "billingCity": "Los Angeles, CA"
                    }
                ]
            }
        ];

        cmp.set('v.gridData', nestedData);


        var expandedRows = ["123556", "123556-A", "123556-B", "123556-B-B", "123557"];

        cmp.set('v.gridExpandedRows', expandedRows);
    }
}); // eslint-disable-line

Copy link
Contributor

Choose a reason for hiding this comment

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

The data should be very similar. I would change _children to nodes align with Tree component. Please review Tree data https://github.com/salesforce/design-system-react/blob/master/utilities/sample-data/tree/nodes-base.jsx#L2

cols: [
{
id: '1',
label: 'Account Name',
href: 'javascript:void(0);',
},
{
id: '2',
label: 'Employees',
href: 'javascript:void(0);',
},
{
id: '3',
label: 'Phone Number',
href: 'javascript:void(0);',
},
{
id: '4',
label: 'Account Owner',
href: 'javascript:void(0);',
},
{
id: '5',
label: 'Billing City',
href: 'javascript:void(0);',
},
],
rows: [
{
id: '1',
cols: [
{
label: 'Rewis Inc',
},
{
label: '3100',
},
{
label: '837-555-1212',
},
{
label: 'Jane Doe',
href: 'javascript:void(0);',
},
{
label: 'Phoenix, AZ',
},
],
},
{
id: '2',
childOpen: true,
Copy link
Contributor

Choose a reason for hiding this comment

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

The Tree keys are:

	 *   expanded: string,
	 *   id: string,
	 *   label: string or node,
	 *   selected: string,
	 *   type: string,
	 *   nodes: array

cols: [
{
label: 'Acme Corporation',
},
{
label: '10000',
},
{
label: '837-555-1212',
},
{
label: 'Jane Doe',
href: 'javascript:void(0);',
Copy link
Contributor

@interactivellama interactivellama Aug 7, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

The default cell render should be just a string. If you'd like to scope this project to only output strings I'm cool with that. We can add custom rendering later

DataTable has a CustomCell render that receives the tree data as props. The CustomCell is the child of the Column child. See https://github.com/salesforce/design-system-react/blob/master/components/data-table/__examples__/advanced.jsx#L10

},
{
label: 'San Francisco, CA',
},
],
subRows: [
{
cols: [
{
label: 'Acme Corporation (Oakland)',
},
{
label: '745',
},
{
label: '837-555-1212',
},
{
label: 'Jane Doe',
href: 'javascript:void(0);',
},
{
label: 'New York, NY',
},
],
},
],
},
{
id: '3',
cols: [
{
label: 'Rohde Enterprises',
},
{
label: '6000',
},
{
label: '837-555-1212',
},
{
label: 'Jane Doe',
href: 'javascript:void(0);',
},
{
label: 'New York, NY',
},
],
},
{
id: '4',
cols: [
{
label: 'Cheese Corp',
},
{
label: '1234',
},
{
label: '837-555-1212',
},
{
label: 'Jane Doe',
href: 'javascript:void(0);',
},
{
label: 'Paris, France',
},
],
},
],
};

class Example extends React.Component {
static displayName = 'treeGridNestedExample';

render() {
return (
<IconSettings iconPath="/assets/icons">
<TreeGrid data={data} />
</IconSettings>
);
}
}

export default Example;
Loading