diff --git a/components/index.js b/components/index.js
index 25ed0ee182..a008145e9f 100644
--- a/components/index.js
+++ b/components/index.js
@@ -253,6 +253,8 @@ export TrialBarButton from './trial-bar/button';
 export SLDSTrialBarButton from './trial-bar/button';
 export TrialBarDropdown from './trial-bar/dropdown';
 export SLDSTrialBarDropdown from './trial-bar/dropdown';
+export SLDSTreeGrid from './tree-grid';
+export TreeGrid from './tree-grid';
 export UNSAFE_DirectionSettings from './utilities/UNSAFE_direction';
 export UtilityIcon from './utilities/utility-icon';
 export SLDSUtilityIcon from './utilities/utility-icon';
diff --git a/components/tree-grid/__docs__/storybook-stories.jsx b/components/tree-grid/__docs__/storybook-stories.jsx
new file mode 100644
index 0000000000..29e48909cd
--- /dev/null
+++ b/components/tree-grid/__docs__/storybook-stories.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { TREE_GRID } from '../../../utilities/constants';
+import Default from '../__examples__/default';
+import Headless from '../__examples__/headless';
+
+storiesOf(TREE_GRID, module)
+	.addDecorator((getStory) => (
+		<div className="slds-p-around_medium">{getStory()}</div>
+	))
+	.add('Default', () => <Default action={action} />)
+	.add('Single Select', () => <Default action={action} selectRows="single" />)
+	.add('w/o Border', () => <Default action={action} isBorderless />)
+	.add('Single Select w/o Border', () => (
+		<Default action={action} selectRows="single" isBorderless />
+	))
+	.add('Headless Single Select w/ Border', () => (
+		<Headless action={action} selectRows="single" />
+	))
+	.add('Headless w/ Border', () => <Headless action={action} />)
+	.add('Headless Single Select w/o Border', () => (
+		<Headless action={action} selectRows="single" isBorderless />
+	))
+	.add('Headless w/o Border', () => <Headless action={action} isBorderless />);
diff --git a/components/tree-grid/__examples__/default.jsx b/components/tree-grid/__examples__/default.jsx
new file mode 100644
index 0000000000..015c546ca0
--- /dev/null
+++ b/components/tree-grid/__examples__/default.jsx
@@ -0,0 +1,495 @@
+import React from 'react';
+
+import TreeGrid from '~/components/tree-grid';
+import TreeGridColumn from '~/components/tree-grid/column';
+import Dropdown from '~/components/menu-dropdown';
+import IconSettings from '~/components/icon-settings';
+
+import log from '~/utilities/log';
+
+const sampleData = {
+	0: {
+		id: 0,
+		nodes: [1, 2, 3, 4],
+	},
+	1: {
+		id: 1,
+		type: 'item',
+		name: '123555',
+		accountName: 'Rewis Inc',
+		employees: 3100,
+		phone: '837-555-1212',
+		accountOwner: 'http://example.com/jane-doe',
+		accountOwnerName: 'Jane Doe',
+		billingCity: 'Phoeniz, AZ',
+	},
+	2: {
+		id: 2,
+		type: 'branch',
+		name: '123556',
+		accountName: 'Acme Corporation',
+		employees: 10000,
+		phone: '837-555-1212',
+		accountOwner: 'http://example.com/john-doe',
+		accountOwnerName: 'John Doe',
+		billingCity: 'San Francisco, CA',
+		nodes: [5, 6],
+	},
+	3: {
+		id: 3,
+		type: 'branch',
+		name: '123557',
+		accountName: 'Rhode Enterprises',
+		employees: 6000,
+		phone: '837-555-1212',
+		accountOwner: 'http://example.com/john-doe',
+		accountOwnerName: 'John Doe',
+		billingCity: 'New York, NY',
+		nodes: [7],
+	},
+	4: {
+		id: 4,
+		type: 'branch',
+		name: '123558',
+		accountName: 'Tech Labs',
+		employees: 1856,
+		phone: '837-555-1212',
+		accountOwner: 'http://example.com/john-doe',
+		accountOwnerName: 'John Doe',
+		billingCity: 'New York, NY',
+		nodes: [8],
+	},
+	5: {
+		id: 5,
+		type: 'branch',
+		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',
+		nodes: [9, 10],
+	},
+	6: {
+		id: 6,
+		type: 'branch',
+		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',
+		nodes: [11, 12],
+	},
+	7: {
+		id: 7,
+		type: 'item',
+		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',
+	},
+	8: {
+		id: 8,
+		type: 'item',
+		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',
+	},
+	9: {
+		id: 9,
+		type: 'item',
+		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',
+	},
+	10: {
+		id: 10,
+		type: 'item',
+		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',
+	},
+	11: {
+		id: 11,
+		type: 'item',
+		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',
+	},
+	12: {
+		id: 12,
+		type: 'branch',
+		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',
+		nodes: [13],
+	},
+	13: {
+		id: 13,
+		type: 'branch',
+		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',
+		nodes: [14],
+	},
+	14: {
+		id: 14,
+		type: 'item',
+		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',
+	},
+};
+
+class Example extends React.Component {
+	static displayName = 'TreeGridExample';
+
+	state = {
+		nodes: this.props.nodes || sampleData,
+		isIndeterminate: false,
+		allSelect: false,
+		selectedNode: null,
+	};
+
+	getNodes = (node) =>
+		node.nodes ? node.nodes.map((id) => this.state.nodes[id]) : [];
+
+	handleExpansion = (event, data) => {
+		log({
+			action: this.props.action,
+			event,
+			eventName: `${data.expanded ? 'Expand' : 'Collapse'} Branch`,
+			data,
+		});
+		const { nodes } = this.state;
+		const updated = {
+			...nodes,
+			...{
+				[data.node.id]: {
+					...data.node,
+					expanded: data.expanded,
+				},
+			},
+		};
+		this.setState({ nodes: updated });
+	};
+
+	findChildren = (node) => {
+		if (node.type === 'branch') {
+			let list = [];
+			node.nodes.forEach((child) => {
+				const c = this.findChildren(this.state.nodes[child]);
+				list = [...c, child, ...list];
+			});
+			return list;
+		}
+		return [];
+	};
+
+	countSelected = (branch) => {
+		const { nodes } = this.state;
+		let selected = 0;
+		branch.forEach((node) => {
+			if (nodes[node].selected === true) selected += 1;
+		});
+		return selected;
+	};
+
+	handleSelection = (event, data) => {
+		log({
+			action: this.props.action,
+			event,
+			eventName: 'Select Branch',
+			data,
+		});
+		if (this.props.selectRows !== 'single') {
+			const curr = this.state.nodes;
+			curr[data.node.id].selected = data.selected;
+			const selectedCount = this.countSelected(curr['0'].nodes);
+			let isIndeterminate = true;
+			let allSelect = false;
+			if (selectedCount === curr['0'].nodes.length) {
+				isIndeterminate = false;
+				allSelect = true;
+			} else if (selectedCount === 0) {
+				isIndeterminate = null;
+			}
+			this.setState({ nodes: curr, isIndeterminate, allSelect });
+		} else {
+			const { nodes, selectedNode } = this.state;
+			nodes[data.node.id].selected = true;
+			if (selectedNode != null) {
+				nodes[selectedNode].selected = false;
+			}
+			this.setState({ nodes, selectedNode: data.node.id });
+		}
+	};
+
+	handleSelectAll = (event) => {
+		const selected = this.state.nodes;
+		const curr = this.state.allSelect;
+		selected['0'].nodes.forEach((node) => {
+			selected[node].selected = !curr;
+		});
+		const presentState = {
+			nodes: selected,
+			allSelect: !curr,
+			isIndeterminate: null,
+		};
+		log({
+			action: this.props.action,
+			event,
+			eventName: 'Selected All',
+			data: presentState,
+		});
+		this.setState(presentState);
+	};
+
+	getCheckedState = () => {
+		if (this.state.allSelect && !this.state.isIndeterminate) return true;
+		if (!this.state.allSelect && !this.state.isIndeterminate) return false;
+		return null;
+	};
+
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<div style={{ overflow: 'auto' }}>
+					<TreeGrid
+						id="example-tree-grid"
+						nodes={this.state.nodes['0'].nodes}
+						isBorderless={this.props.isBorderless}
+						getNodes={this.getNodes}
+						onExpand={this.handleExpansion}
+						onSelect={this.handleSelection}
+						onSelectAll={this.handleSelectAll}
+						checked={this.getCheckedState()}
+						selectRows={this.props.selectRows}
+						moreActionsDropdown={
+							<Dropdown
+								id="file-more-actions"
+								iconCategory="utility"
+								iconName="down"
+								iconVariant="border-filled"
+								iconSize="x-small"
+								align="right"
+								onSelect={(event, data) => {
+									log({
+										action: this.props.action,
+										event,
+										eventName: 'More actions button of row clicked',
+										data,
+									});
+								}}
+								options={[
+									{ label: 'Menu Item One', value: 'A0' },
+									{ label: 'Menu Item Two', value: 'B0' },
+								]}
+								value="A0"
+							/>
+						}
+					>
+						<TreeGridColumn
+							type="text"
+							key="account"
+							label="Account Name"
+							property="accountName"
+							initialWidth={300}
+							isPrimaryColumn
+							moreActionsDropdown={
+								<Dropdown
+									id="file-more-actions"
+									iconCategory="utility"
+									iconName="chevrondown"
+									iconVariant="container"
+									iconSize="x-small"
+									align="right"
+									onSelect={(event, data) => {
+										log({
+											action: this.props.action,
+											event,
+											eventName:
+												'More Actions Button of accountName column clicked',
+											data,
+										});
+									}}
+									options={[
+										{ label: 'Menu Item One', value: 'A0' },
+										{ label: 'Menu Item Two', value: 'B0' },
+									]}
+									value="A0"
+								/>
+							}
+						/>
+						<TreeGridColumn
+							type="number"
+							key="employees"
+							label="Employees"
+							property="employees"
+							initialWidth={150}
+							variant="icon"
+							moreActionsDropdown={
+								<Dropdown
+									id="file-more-actions"
+									iconCategory="utility"
+									iconName="chevrondown"
+									iconVariant="container"
+									iconSize="x-small"
+									align="right"
+									onSelect={(event, data) => {
+										log({
+											action: this.props.action,
+											event,
+											eventName:
+												'More Actions Button of employees column clicked',
+											data,
+										});
+									}}
+									options={[
+										{ label: 'Menu Item One', value: 'A0' },
+										{ label: 'Menu Item Two', value: 'B0' },
+									]}
+									value="A0"
+								/>
+							}
+						/>
+						<TreeGridColumn
+							type="phone"
+							key="phone"
+							label="Phone Number"
+							property="phone"
+							initialWidth={200}
+							variant="icon"
+							moreActionsDropdown={
+								<Dropdown
+									id="file-more-actions"
+									iconCategory="utility"
+									iconName="chevrondown"
+									iconVariant="container"
+									iconSize="x-small"
+									align="right"
+									onSelect={(event, data) => {
+										log({
+											action: this.props.action,
+											event,
+											eventName: 'More Actions Button of phone column clicked',
+											data,
+										});
+									}}
+									options={[
+										{ label: 'Menu Item One', value: 'A0' },
+										{ label: 'Menu Item Two', value: 'B0' },
+									]}
+									value="A0"
+								/>
+							}
+						/>
+						<TreeGridColumn
+							type="url"
+							key="owner"
+							label="Account Owner"
+							property="accountOwner"
+							iconSize="x-small"
+							variant="icon"
+							initialWidth={150}
+							typeAttributes={{
+								label: { fieldName: 'accountOwnerName' },
+							}}
+							moreActionsDropdown={
+								<Dropdown
+									id="file-more-actions"
+									iconCategory="utility"
+									iconName="chevrondown"
+									iconVariant="container"
+									iconSize="x-small"
+									align="right"
+									onSelect={(event, data) => {
+										log({
+											action: this.props.action,
+											event,
+											eventName:
+												'More Actions Button of accountOwner column clicked',
+											data,
+										});
+									}}
+									options={[
+										{ label: 'Menu Item One', value: 'A0' },
+										{ label: 'Menu Item Two', value: 'B0' },
+									]}
+									value="A0"
+								/>
+							}
+						/>
+						<TreeGridColumn
+							type="text"
+							key="city"
+							label="Billing City"
+							property="billingCity"
+							initialWidth={200}
+							variant="icon"
+							moreActionsDropdown={
+								<Dropdown
+									id="file-more-actions"
+									iconCategory="utility"
+									iconName="chevrondown"
+									iconVariant="container"
+									iconSize="x-small"
+									align="right"
+									onSelect={(event, data) => {
+										log({
+											action: this.props.action,
+											event,
+											eventName: 'More Actions Button of city column clicked',
+											data,
+										});
+									}}
+									options={[
+										{ label: 'Menu Item One', value: 'A0' },
+										{ label: 'Menu Item Two', value: 'B0' },
+									]}
+									value="A0"
+								/>
+							}
+						/>
+					</TreeGrid>
+				</div>
+			</IconSettings>
+		);
+	}
+}
+
+export default Example;
diff --git a/components/tree-grid/__examples__/headless.jsx b/components/tree-grid/__examples__/headless.jsx
new file mode 100644
index 0000000000..d60e9573c0
--- /dev/null
+++ b/components/tree-grid/__examples__/headless.jsx
@@ -0,0 +1,217 @@
+import React from 'react';
+
+import TreeGrid from '~/components/tree-grid';
+import Dropdown from '~/components/menu-dropdown';
+import TreeGridColumn from '~/components/tree-grid/column';
+import IconSettings from '~/components/icon-settings';
+
+import log from '~/utilities/log';
+
+const sampleData = {
+	0: {
+		id: 0,
+		nodes: [1, 2, 3, 4],
+	},
+	1: {
+		id: 1,
+		type: 'item',
+		name: '123555',
+		accountName: 'Rewis Inc',
+	},
+	2: {
+		id: 2,
+		type: 'branch',
+		name: '123556',
+		accountName: 'Acme Corporation',
+		nodes: [5, 6],
+	},
+	3: {
+		id: 3,
+		type: 'branch',
+		name: '123557',
+		accountName: 'Rhode Enterprises',
+		nodes: [7],
+	},
+	4: {
+		id: 4,
+		type: 'branch',
+		name: '123558',
+		accountName: 'Tech Labs',
+		nodes: [8],
+	},
+	5: {
+		id: 5,
+		type: 'branch',
+		name: '123556-A',
+		accountName: 'Acme Corporation (Bay Area)',
+		nodes: [9, 10],
+	},
+	6: {
+		id: 6,
+		type: 'branch',
+		name: '123556-B',
+		accountName: 'Acme Corporation (East)',
+		nodes: [11, 12],
+	},
+	7: {
+		id: 7,
+		type: 'item',
+		name: '123557-A',
+		accountName: 'Rhode Enterprises (UCA)',
+	},
+	8: {
+		id: 8,
+		type: 'item',
+		name: '123558-A',
+		accountName: 'Opportunity Resources Inc',
+	},
+	9: {
+		id: 9,
+		type: 'item',
+		name: '123556-A-A',
+		accountName: 'Acme Corporation (Oakland)',
+	},
+	10: {
+		id: 10,
+		type: 'item',
+		name: '123556-A-B',
+		accountName: 'Acme Corporation (San Francisco)',
+	},
+	11: {
+		id: 11,
+		type: 'item',
+		name: '123556-B-A',
+		accountName: 'Acme Corporation (NY)',
+	},
+	12: {
+		id: 12,
+		type: 'branch',
+		name: '123556-B-B',
+		accountName: 'Acme Corporation (VA)',
+		nodes: [13],
+	},
+	13: {
+		id: 13,
+		type: 'branch',
+		name: '123556-B-B-A',
+		accountName: 'Allied Technologies',
+		nodes: [14],
+	},
+	14: {
+		id: 14,
+		type: 'item',
+		name: '123556-B-B-A-A',
+		accountName: 'Allied Technologies (UV)',
+	},
+};
+
+class Example extends React.Component {
+	static displayName = 'TreeGridExample';
+
+	state = {
+		nodes: this.props.nodes || sampleData,
+	};
+
+	getNodes = (node) =>
+		node.nodes ? node.nodes.map((id) => this.state.nodes[id]) : [];
+
+	handleExpansion = (event, data) => {
+		log({
+			action: this.props.action,
+			event,
+			eventName: 'Expand Branch',
+			data,
+		});
+		const { nodes } = this.state;
+		const updated = {
+			...nodes,
+			...{
+				[data.node.id]: {
+					...data.node,
+					expanded: data.expanded,
+				},
+			},
+		};
+		this.setState({ nodes: updated });
+	};
+
+	findChildren = (node) => {
+		if (node.type === 'branch') {
+			let list = [];
+			node.nodes.forEach((child) => {
+				const c = this.findChildren(this.state.nodes[child]);
+				list = [...c, child, ...list];
+			});
+			return list;
+		}
+		return [];
+	};
+
+	handleSelection = (event, data) => {
+		log({
+			action: this.props.action,
+			event,
+			eventName: 'Select Branch',
+			data,
+		});
+		const curr = this.state.nodes;
+		curr[data.node.id].selected = data.selected;
+		const children = this.findChildren(data.node);
+		children.forEach((child) => {
+			curr[child].selected = data.selected;
+		});
+		this.setState({ nodes: curr });
+	};
+
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<div style={{ overflow: 'auto' }}>
+					<TreeGrid
+						isHeadless
+						isBorderless={this.props.isBorderless}
+						selectRows={this.props.selectRows}
+						nodes={this.state.nodes['0'].nodes}
+						getNodes={this.getNodes}
+						onExpand={this.handleExpansion}
+						onSelect={this.handleSelection}
+						moreActionsDropdown={
+							<Dropdown
+								id="file-more-actions"
+								iconCategory="utility"
+								iconName="down"
+								iconVariant="border-filled"
+								iconSize="x-small"
+								align="right"
+								onSelect={(event, data) => {
+									log({
+										action: this.props.action,
+										event,
+										eventName: 'More actions button of row clicked',
+										data,
+									});
+								}}
+								options={[
+									{ label: 'Menu Item One', value: 'A0' },
+									{ label: 'Menu Item Two', value: 'B0' },
+								]}
+								value="A0"
+							/>
+						}
+					>
+						<TreeGridColumn
+							type="text"
+							key="account"
+							label="Account Name"
+							property="accountName"
+							initialWidth={300}
+							isPrimaryColumn
+						/>
+					</TreeGrid>
+				</div>
+			</IconSettings>
+		);
+	}
+}
+
+export default Example;
diff --git a/components/tree-grid/column.jsx b/components/tree-grid/column.jsx
new file mode 100644
index 0000000000..a7168906ac
--- /dev/null
+++ b/components/tree-grid/column.jsx
@@ -0,0 +1,123 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/* eslint-disable react/no-unused-prop-types */
+/* deepscan-disable REACT_USELESS_PROP_TYPES */
+
+// ### React
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import isFunction from 'lodash.isfunction';
+
+import Icon from '../icon';
+
+// ## Constants
+import { TREE_GRID_COLUMN } from '../../utilities/constants';
+
+/**
+ * Columns define the structure of the data displayed in the DataTable.
+ */
+const TreeGridColumn = (props) => {
+	let { sortDirection } = props;
+	if (props.isDefaultSortDescending && !sortDirection) sortDirection = 'desc';
+
+	return (
+		<th
+			aria-label={props.label}
+			aria-sort="none"
+			className={classNames('slds-has-button-menu', {
+				'slds-is-sortable': props.sortable,
+			})}
+			scope="col"
+			style={{
+				width: props.initialWidth ? props.initialWidth : 'auto',
+			}}
+		>
+			<a
+				className="slds-th__action slds-text-link_reset"
+				onClick={isFunction(props.onClick) ? props.onClick : null}
+				role="button"
+				tabIndex="-1"
+			>
+				<span className="slds-assistive-text">
+					{props.assistiveText.sortBy}
+				</span>
+				<div className="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
+					<span className="slds-truncate" title={props.title}>
+						{props.label}
+					</span>
+					{!props.sortable ? (
+						<Icon
+							category="utility"
+							name={sortDirection === 'asc' ? 'arrowup' : 'arrowdown'}
+							className="slds-is-sortable__icon"
+						/>
+					) : null}
+				</div>
+			</a>
+			{React.cloneElement(props.moreActionsDropdown, {
+				triggerClassName: 'slds-th__action-button',
+				tabIndex: '-1',
+			})}
+		</th>
+	);
+};
+
+TreeGridColumn.displayName = TREE_GRID_COLUMN;
+
+TreeGridColumn.defaultProps = {
+	assistiveText: PropTypes.shape({
+		sortBy: 'Sort By: ',
+	}),
+	sortDirection: 'asc',
+	isDefaultSortDescending: false,
+};
+
+TreeGridColumn.propTypes = {
+	assistiveText: PropTypes.shape({
+		sortBy: PropTypes.string,
+	}),
+	/**
+	 * Some columns, such as "date last viewed" or "date recently updated," should sort descending first, since that is what the user probably wants. How often does one want to see their oldest files first in a table? If sortable and the `DataTable`'s parent has not defined the sort order, then ascending (A at the top to Z at the bottom) is the default sort order on first click.
+	 */
+	isDefaultSortDescending: PropTypes.bool,
+	/**
+	 * Selects this column as the currently sorted column.
+	 */
+	isSorted: PropTypes.bool,
+	/**
+	 * The column label. If a `string` is not passed in, no `title` attribute will be rendered.
+	 */
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+	/**
+	 * The primary column for a row. This is almost always the first column.
+	 */
+	primaryColumn: PropTypes.bool,
+	/**
+	 * The property which corresponds to this column.
+	 */
+	property: PropTypes.string,
+	/**
+	 * Whether or not the column is sortable.
+	 */
+	sortable: PropTypes.bool,
+	/**
+	 * The current sort direction. If left out the component will track this internally. Required if `isSorted` is true.
+	 */
+	sortDirection: PropTypes.oneOf(['desc', 'asc']),
+	/**
+	 * Title used for truncation div within the cell.
+	 */
+	title: PropTypes.string,
+	/**
+	 * Adds truncate to cell node.
+	 */
+	truncate: PropTypes.bool,
+	/**
+	 * Width of column. This is required for advanced/fixed layout tables. Please provide units. (`rems` are recommended)
+	 */
+	width: PropTypes.string,
+};
+
+export default TreeGridColumn;
diff --git a/components/tree-grid/components.json b/components/tree-grid/components.json
new file mode 100644
index 0000000000..bfdd3bd063
--- /dev/null
+++ b/components/tree-grid/components.json
@@ -0,0 +1,18 @@
+{
+	"component": "tree-grid",
+	"status": "prototype",
+	"display-name": "Tree Grid",
+	"classKey": "TreeGrid",
+	"SLDS-component-path": "/components/tree-grid",
+	"dependencies": [
+		{
+			"component": "column",
+			"classKey": "TreeGridColumn"
+		}
+	],
+	"site-stories": [
+		"/__examples__/default.jsx",
+		"/__examples__/headless.jsx"
+	],
+	"url-slug": "tree-grid"
+}
diff --git a/components/tree-grid/index.jsx b/components/tree-grid/index.jsx
new file mode 100644
index 0000000000..a57280bb1c
--- /dev/null
+++ b/components/tree-grid/index.jsx
@@ -0,0 +1,287 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
+/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+// Implements the [Tree Grid design pattern](https://lightningdesignsystem.com/components/tree-grid/) in React.
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+// ### shortid
+// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
+// shortid is a short, non-sequential, url-friendly, unique id generator
+import shortid from 'shortid';
+import assign from 'lodash.assign';
+import isFunction from 'lodash.isfunction';
+
+import { TREE_GRID } from '../../utilities/constants';
+import TreeGridColumn from './column';
+import Checkbox from '../checkbox';
+import Branch from './private/branch';
+
+const displayName = TREE_GRID;
+
+const propTypes = {
+	/**
+	 * **Assistive text for accessibility.**
+	 * This object is merged with the default props object on every render.
+	 * * `actionsHeader`: Text for heading of actions column
+	 * * `selectAllRows`: Text for select all checkbox within the table header
+	 * * `selectRow`: Text for select row
+	 */
+	assistiveText: PropTypes.shape({
+		actions: PropTypes.string,
+		actionsHeader: PropTypes.string,
+		selectAll: PropTypes.string,
+		selectRow: PropTypes.string,
+	}),
+	/**
+	 * CSS class names to be added to the container element. `array`, `object`, or `string` are accepted.
+	 */
+	className: PropTypes.oneOfType([
+		PropTypes.array,
+		PropTypes.object,
+		PropTypes.string,
+	]),
+	/**
+	 * HTML id for component.
+	 */
+	id: PropTypes.string,
+	/**
+	 *  State of the checkbox
+	 */
+	checked: PropTypes.bool,
+	/**
+	 * Specifies a row selection UX pattern.
+	 * * `multiple`: This is the default
+	 * * `single`: Single row selection.
+	 */
+	selectRows: PropTypes.oneOf(['single', 'multiple']),
+
+	nodes: PropTypes.arrayOf(
+		PropTypes.oneOfType([
+			PropTypes.number,
+			PropTypes.string,
+			PropTypes.shape({
+				id: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+					.isRequired,
+				label: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
+					.isRequired,
+				type: PropTypes.string.isRequired,
+				selected: PropTypes.bool,
+				expanded: PropTypes.bool,
+			}),
+		])
+	).isRequired,
+	/**
+	 * Callback function for selection of rows
+	 */
+	onSelect: PropTypes.func,
+	/**
+	 * Callback function for selection of all rows
+	 */
+	onSelectAll: PropTypes.func,
+	/**
+	 * Callback function for expansion of rows
+	 */
+	onExpand: PropTypes.func,
+	/**
+	 * Whether the TreeGrid is headless
+	 */
+	isHeadless: PropTypes.bool,
+	/**
+	 * Whether the TreeGrid is borderless
+	 */
+	isBorderless: PropTypes.bool,
+};
+
+const defaultProps = {
+	assistiveText: {
+		actions: 'Actions',
+		actionsHeader: 'Action Header',
+		selectAll: 'Select All',
+		selectRow: 'Select Row',
+	},
+	selectRows: 'multiple',
+};
+
+/**
+ * A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed.
+ */
+class TreeGrid extends React.Component {
+	constructor(props) {
+		super(props);
+
+		const flattenedNodes = this.flattenTree({
+			nodes: this.props.getNodes({ nodes: this.props.nodes }),
+			expanded: true,
+		}).slice(1);
+
+		let focusedNodeIndex;
+
+		this.state = {
+			flattenedNodes,
+			focusedNodeIndex,
+		};
+
+		this.generatedId = shortid.generate();
+	}
+
+	componentWillReceiveProps(nextProps) {
+		this.setState({
+			flattenedNodes: this.flattenTree({
+				nodes: this.props.getNodes({ nodes: nextProps.nodes }),
+				expanded: true,
+			}).slice(1),
+		});
+	}
+
+	/**
+	 * Get the TreeGrid's HTML id. Generate a new one if no ID present.
+	 */
+	getId() {
+		return this.props.id || this.generatedId;
+	}
+
+	flattenTree = (root, treeIndex = '', firstLevel = true) => {
+		if (!root.nodes) {
+			return [{ node: root, treeIndex }];
+		}
+		let nodes = [{ node: root, treeIndex }];
+		if (root.expanded) {
+			for (let index = 0; index < root.nodes.length; index += 1) {
+				const curNode = firstLevel
+					? root.nodes[index]
+					: this.props.getNodes(root)[index];
+				nodes = nodes.concat(
+					this.flattenTree(
+						curNode,
+						treeIndex ? `${treeIndex}-${index}` : `${index}`,
+						false
+					)
+				);
+			}
+		}
+		return nodes;
+	};
+
+	handleFocus = (event, data) => {
+		this.setState({
+			focusedNodeIndex: data.treeIndex,
+		});
+	};
+
+	handleSelectAll = (event, data) => {
+		if (isFunction(this.props.onSelectAll)) {
+			this.props.onSelectAll(event, data);
+		}
+	};
+
+	render() {
+		const assistiveText = assign(
+			{},
+			defaultProps.assistiveText,
+			this.props.assistiveText
+		);
+
+		const columns = [];
+		React.Children.forEach(this.props.children, (child) => {
+			if (child && child.type.displayName === TreeGridColumn.displayName) {
+				const { children, ...columnProps } = child.props;
+
+				const props = assign({}, this.props);
+				assign(props, columnProps);
+
+				columns.push({
+					props,
+					dataTableProps: this.props,
+				});
+			}
+		});
+
+		return (
+			<table
+				id={this.getId()}
+				aria-readonly="true"
+				aria-multiselectable={this.props.selectRows === 'multiple'}
+				/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role */
+				role="treegrid"
+				className={classNames(
+					'slds-table',
+					'slds-table_edit',
+					'slds-table_fixed-layout',
+					'slds-tree slds-table_tree',
+					{ 'slds-table_bordered': !this.props.isBorderless },
+					{ 'slds-table_header-hidden': this.props.isHeadless },
+					this.props.className
+				)}
+			>
+				{this.props.isHeadless ? null : (
+					<thead>
+						<tr className="slds-line-height_reset">
+							{this.props.selectRows === 'multiple' ? (
+								<th
+									className="slds-text-align_right"
+									scope="col"
+									style={{ width: '3.5rem' }}
+								>
+									<span
+										id="column-group-header"
+										className="slds-assistive-text"
+									>
+										{assistiveText.selectRow}
+									</span>
+									<div
+										className="slds-th__action slds-th__action_form"
+										tabIndex="-1"
+									>
+										<Checkbox
+											assistiveText={{
+												label: assistiveText.selectAll,
+											}}
+											name="options"
+											indeterminate={this.props.checked === null}
+											checked={this.props.checked}
+											onChange={this.handleSelectAll}
+										/>
+									</div>
+								</th>
+							) : null}
+							{this.props.children}
+							<th scope="col" style={{ width: '3.25rem' }}>
+								<div
+									className="slds-truncate slds-assistive-text"
+									title={assistiveText.actions}
+								>
+									{assistiveText.actions}
+								</div>
+							</th>
+						</tr>
+					</thead>
+				)}
+				<tbody>
+					{
+						<Branch
+							level={0}
+							treeId={this.getId()}
+							getNodes={this.props.getNodes}
+							node={{ nodes: this.props.nodes }}
+							flattenedNodes={this.state.flattenedNodes}
+							focusedNodeIndex={this.state.focusedNodeIndex}
+							columns={columns}
+							onSelect={this.props.onSelect}
+							onExpand={this.props.onExpand}
+							onFocus={this.handleFocus}
+							selectRows={this.props.selectRows}
+							moreActionsDropdown={this.props.moreActionsDropdown}
+						/>
+					}
+				</tbody>
+			</table>
+		);
+	}
+}
+
+TreeGrid.displayName = displayName;
+TreeGrid.propTypes = propTypes;
+TreeGrid.defaultProps = defaultProps;
+
+export default TreeGrid;
diff --git a/components/tree-grid/private/branch.jsx b/components/tree-grid/private/branch.jsx
new file mode 100644
index 0000000000..8aa1c33948
--- /dev/null
+++ b/components/tree-grid/private/branch.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import shortid from 'shortid';
+
+import { TREE_GRID_BRANCH } from '../../../utilities/constants';
+
+import Item from './item';
+
+const Branch = (props) => {
+	let treeIndex = '';
+	let children;
+
+	const { getNodes, node, level } = props;
+
+	if (Array.isArray(getNodes(node))) {
+		children = getNodes(node).map((n, i) => {
+			let child;
+			treeIndex = `${i}`;
+			if (props.treeIndex) {
+				treeIndex = `${props.treeIndex}-${treeIndex}`;
+			}
+
+			if (n.type === 'branch') {
+				child = (
+					<Branch
+						key={n.id}
+						treeId={`${props.treeId}-${n.id}`}
+						level={level + 1}
+						levelCount={getNodes(node).length}
+						getNodes={getNodes}
+						columns={props.columns}
+						node={n}
+						flattenedNodes={props.flattenedNodes}
+						focusedNodeIndex={props.focusedNodeIndex}
+						onExpand={props.onExpand}
+						onSelect={props.onSelect}
+						onFocus={props.onFocus}
+						selectRows={props.selectRows}
+						treeIndex={treeIndex}
+						moreActionsDropdown={props.moreActionsDropdown}
+					/>
+				);
+			} else {
+				child = (
+					<Item
+						key={shortid.generate()}
+						id={`${props.treeId}-${node.id}`}
+						level={level + 1}
+						levelCount={getNodes(node).length}
+						pos={i}
+						row={n}
+						columns={props.columns}
+						flattenedNodes={props.flattenedNodes}
+						focusedNodeIndex={props.focusedNodeIndex}
+						onExpand={props.onExpand}
+						onSelect={props.onSelect}
+						onFocus={props.onFocus}
+						selectRows={props.selectRows}
+						treeIndex={treeIndex}
+						moreActionsDropdown={props.moreActionsDropdown}
+					/>
+				);
+			}
+			return child;
+		});
+	}
+
+	return (
+		<React.Fragment>
+			{props.level !== 0 ? (
+				<Item
+					key={shortid.generate()}
+					id={`${props.treeId}-${node.id}`}
+					level={props.level}
+					levelCount={props.levelCount}
+					row={node}
+					columns={props.columns}
+					flattenedNodes={props.flattenedNodes}
+					focusedNodeIndex={props.focusedNodeIndex}
+					onExpand={props.onExpand}
+					onSelect={props.onSelect}
+					onFocus={props.onFocus}
+					selectRows={props.selectRows}
+					treeIndex={props.treeIndex}
+					moreActionsDropdown={props.moreActionsDropdown}
+				/>
+			) : null}
+			{node.expanded || props.level === 0 ? children : null}
+		</React.Fragment>
+	);
+};
+
+Branch.displayName = TREE_GRID_BRANCH;
+
+export default Branch;
diff --git a/components/tree-grid/private/cell.jsx b/components/tree-grid/private/cell.jsx
new file mode 100644
index 0000000000..f1eb3dda9f
--- /dev/null
+++ b/components/tree-grid/private/cell.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { TREE_GRID_CELL } from '../../../utilities/constants';
+import Button from '../../button';
+
+const TreeGridCell = (props) =>
+	props.isPrimaryColumn ? (
+		<th
+			key={props.id}
+			className="slds-tree__item"
+			// data-label={label}
+			scope="row"
+			style={{
+				paddingTop: '0.5rem',
+				paddingBottom: '0.5rem',
+			}}
+		>
+			<Button
+				variant="icon"
+				iconSize="x-small"
+				iconCategory="utility"
+				onClick={props.onClickExpand}
+				className={classNames(
+					'slds-button',
+					'slds-button_icon',
+					'slds-m-right_x-small',
+					!props.hasChildren ? 'slds-is-disabled' : null
+				)}
+				iconName={props.isChildOpen ? 'chevrondown' : 'chevronright'}
+			/>
+			<div className="slds-truncate" title="sometitle">
+				<a href="#" tabIndex="-1">
+					{props.children}
+				</a>
+			</div>
+		</th>
+	) : (
+		<td
+			key={props.id}
+			// data-label={cols[i].label}
+			role="gridcell"
+		>
+			<div className="slds-truncate" title="ss">
+				{props.children}
+			</div>
+		</td>
+	);
+
+TreeGridCell.displayName = TREE_GRID_CELL;
+
+TreeGridCell.propTypes = {
+	isPrimaryColumn: PropTypes.bool,
+	isChildOpen: PropTypes.bool,
+	hasChildren: PropTypes.bool,
+	onClickExpand: PropTypes.func,
+	children: PropTypes.node,
+};
+
+TreeGridCell.defaultProps = {
+	isPrimaryColumn: false,
+	isChildOpen: false,
+	hasChildren: false,
+};
+
+export default TreeGridCell;
diff --git a/components/tree-grid/private/item.jsx b/components/tree-grid/private/item.jsx
new file mode 100644
index 0000000000..bcf452875e
--- /dev/null
+++ b/components/tree-grid/private/item.jsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import shortid from 'shortid';
+import findIndex from 'lodash.findindex';
+import isFunction from 'lodash.isfunction';
+
+import { TREE_GRID_ITEM } from '../../../utilities/constants';
+import Checkbox from '../../checkbox';
+import TreeGridCell from './cell';
+
+import EventUtil from '../../../utilities/event';
+import KEYS from '../../../utilities/key-code';
+import mapKeyEventCallbacks from '../../../utilities/key-callbacks';
+
+const Item = (props) => {
+	const isFocused = props.treeIndex === props.focusedNodeIndex;
+
+	const findNextNode = (flattenedNodes, node) => {
+		const nodes = flattenedNodes.map((flattenedNode) => flattenedNode.node);
+		const index = findIndex(nodes, { id: node.id });
+		return flattenedNodes[(index + 1) % flattenedNodes.length];
+	};
+
+	const findPreviousNode = (flattenedNodes, node) => {
+		const nodes = flattenedNodes.map((flattenedNode) => flattenedNode.node);
+		let index = findIndex(nodes, { id: node.id }) - 1;
+		if (index < 0) {
+			index += flattenedNodes.length;
+		}
+		return flattenedNodes[index];
+	};
+
+	const handleExpansion = (event) => {
+		if (isFunction(props.onExpand)) {
+			EventUtil.trap(event);
+			props.onExpand(event, {
+				node: props.row,
+				expanded: !props.row.expanded,
+			});
+		}
+	};
+
+	const handleSelection = (event) => {
+		if (isFunction(props.onSelect)) {
+			EventUtil.trap(event);
+			props.onSelect(event, {
+				node: props.row,
+				selected: !props.row.selected,
+			});
+		}
+	};
+
+	const handleKeyDownDown = (event) => {
+		const flattenedNode = findNextNode(props.flattenedNodes, props.row);
+		props.onFocus(event, flattenedNode);
+	};
+
+	const handleKeyDownUp = (event) => {
+		const flattenedNode = findPreviousNode(props.flattenedNodes, props.row);
+		props.onFocus(event, flattenedNode);
+	};
+
+	const handleKeyDownLeft = (event) => {
+		if (props.row.nodes !== undefined) {
+			if (isFunction(props.onExpand)) {
+				props.onExpand(event, {
+					node: props.row,
+					expanded: false,
+				});
+			}
+		}
+	};
+
+	const handleKeyDownRight = (event) => {
+		if (props.row.nodes !== undefined) {
+			if (isFunction(props.onExpand)) {
+				props.onExpand(event, {
+					node: props.row,
+					expanded: true,
+				});
+			}
+		}
+	};
+
+	const handleKeyDown = (event) => {
+		mapKeyEventCallbacks(event, {
+			callbacks: {
+				[KEYS.DOWN]: { callback: (e) => handleKeyDownDown(e) },
+				[KEYS.UP]: { callback: (e) => handleKeyDownUp(e) },
+				[KEYS.LEFT]: { callback: (e) => handleKeyDownLeft(e) },
+				[KEYS.RIGHT]: { callback: (e) => handleKeyDownRight(e) },
+				[KEYS.ENTER]: { callback: (e) => handleSelection(e) },
+			},
+		});
+	};
+
+	const getTabIndex = () => {
+		const initialFocus = props.treeIndex === props.flattenedNodes[0].treeIndex;
+		return props.treeIndex === props.focusedNodeIndex || initialFocus ? 0 : -1;
+	};
+
+	return (
+		<React.Fragment>
+			<tr
+				id={props.id}
+				aria-level={props.level}
+				aria-posinset={props.pos}
+				aria-setsize={props.levelCount}
+				aria-selected={props.row.selected ? 'true' : 'false'}
+				tabIndex={getTabIndex()}
+				className={classNames(
+					`slds-hint-parent`,
+					props.row.selected ? `slds-is-selected` : null
+				)}
+				onClick={(event) =>
+					props.selectRows === 'single' ? handleSelection(event) : null
+				}
+				onKeyDown={handleKeyDown}
+				ref={(component) => {
+					if (component && isFocused) {
+						component.focus();
+					}
+				}}
+			>
+				{props.selectRows === 'multiple' ? (
+					<td
+						className="slds-text-align_right"
+						role="gridcell"
+						style={{ width: '3.25rem' }}
+					>
+						<Checkbox
+							name="options"
+							assistiveText={{
+								label: `Select item ${props.id}`,
+							}}
+							id={`${props.id}-checkbox`}
+							checked={props.row.selected}
+							onChange={handleSelection}
+							tabIndex="-1"
+						/>
+					</td>
+				) : null}
+				{props.columns.map((col, i) => (
+					<TreeGridCell
+						key={shortid.generate()}
+						id={`${props.id}-col-${i}`}
+						isPrimaryColumn={col.props.isPrimaryColumn}
+						isChildOpen={props.row.expanded}
+						hasChildren={props.row.nodes !== undefined}
+						onClickExpand={handleExpansion}
+					>
+						{col.props.typeAttributes
+							? props.row[col.props.typeAttributes.label.fieldName]
+							: props.row[col.props.property]}
+					</TreeGridCell>
+				))}
+				<td role="gridcell" style={{ width: '3.25rem' }}>
+					{React.cloneElement(props.moreActionsDropdown, {
+						onSelect: (event, obj) => {
+							const object = { selection: obj, row: props.row };
+							props.moreActionsDropdown.props.onSelect(event, object);
+						},
+					})}
+				</td>
+			</tr>
+		</React.Fragment>
+	);
+};
+
+Item.displayName = TREE_GRID_ITEM;
+
+Item.propTypes = {
+	id: PropTypes.string,
+	level: PropTypes.number,
+	columns: PropTypes.arrayOf(PropTypes.object),
+	row: PropTypes.object,
+	onSelect: PropTypes.func,
+	onExpand: PropTypes.func,
+};
+
+export default Item;
diff --git a/utilities/constants.js b/utilities/constants.js
index b1430f4dd3..7cbab8ef74 100644
--- a/utilities/constants.js
+++ b/utilities/constants.js
@@ -146,6 +146,11 @@ export const TOAST_CONTAINER = 'SLDSToastContainer';
 export const TREE = 'SLDSTree';
 export const TREE_BRANCH = 'SLDSTreeBranch';
 export const TREE_ITEM = 'SLDSTreeItem';
+export const TREE_GRID = 'SLDSTreeGrid';
+export const TREE_GRID_COLUMN = 'SLDSTreeGridColumn';
+export const TREE_GRID_BRANCH = 'SLDSTreeGridBranch';
+export const TREE_GRID_ITEM = 'SLDSTreeGridItem';
+export const TREE_GRID_CELL = 'SLDSTreeGridCell';
 export const TRIAL_BAR = 'SLDSTrialBar';
 export const TRIAL_BAR_DROPDOWN = 'SLDSTrialBarDropdown';
 export const TRIAL_BAR_BUTTON = 'SLDSTrialBarButton';