feat(Table): New itemKey prop

This allows the table component to support
data objects with unique keys other than `id`

src/Table/README.mdx

@@ -24,7 +24,7 @@ A table component with a sticky header row.
 The table data is provided as an array of objects. The column names defined will be used to select a field from the data row by default, but in most cases you'll want to specify a custom field, which you can do using the `cellRenderer` prop (see "Country" column below).
 
 ```jsx
-<Table data={dummyData.slice(0, 4)}>
+<Table data={dummyData.slice(0, 4)} itemKey="name">
 	<Column isHeading name="Name" />
 	<Column name="Email" />
 	<Column name="Country" cellRenderer={item => item.region} />
@@ -34,7 +34,7 @@ The table data is provided as an array of objects. The column names defined will
 ```
 
 <Playground>
-	<Table data={dummyData.slice(0, 4)}>
+	<Table data={dummyData.slice(0, 4)} itemKey="name">
 		<Column isHeading name="Name" />
 		<Column name="Email" />
 		<Column name="Country" cellRenderer={item => item.region} />
@@ -50,6 +50,7 @@ You can also define your columns as an array of objects, if you prefer:
 ```jsx
 <Table
 	data={dummyData.slice(0, 4)}
+	itemKey="name"
 	columns={[
 		{name: 'Name', isHeading: true},
 		{name: 'Email'},
@@ -71,7 +72,13 @@ You can also define your columns as an array of objects, if you prefer:
 
 <Playground>
 	<div style={{border: '1px solid grey', borderRadius: 10}}>
-		<Table shadedHeader data={dummyData.slice(4, 8)} pl="xl" pr={20}>
+		<Table
+			shadedHeader
+			data={dummyData.slice(4, 8)}
+			itemKey="name"
+			pl="xl"
+			pr={20}
+		>
 			<Column
 				name="Role"
 				width={32}
@@ -104,7 +111,11 @@ You can also define your columns as an array of objects, if you prefer:
 The table below uses both modes – on medium sized screens, columns that don't fit are hidden, while the mobile view is active on very small screens.
 
 <Playground>
-	<Table mobileViewBreakpoint="xxs" data={dummyData.slice(8, 12)}>
+	<Table
+		mobileViewBreakpoint="xxs"
+		data={dummyData.slice(8, 12)}
+		itemKey="name"
+	>
 		<Column
 			name="Role"
 			width={32}

src/Table/index.js

@@ -278,7 +278,7 @@ function Table(props) {
 			{/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
 			<tbody role="rowgroup">
 				{data.map(item => (
-					<tr key={item.id} role="row">
+					<tr key={item[itemKey]} role="row">
 						{columns.map(column => {
 							const {
 								cellRenderer,
@@ -308,6 +308,7 @@ function Table(props) {
 }
 
 Table.defaultProps = {
+	itemKey: 'id',
 	headerRenderer: defaultHeaderRenderer,
 	mobileViewBreakpoint: 'xs',
 	stickyHeaderOffset: 0,
@@ -317,6 +318,11 @@ Table.defaultProps = {
 Table.propTypes = {
 	columns: PropTypes.arrayOf(PropTypes.shape(columnPropsShape)),
 	data: PropTypes.array.isRequired,
+	/**
+	 * Specify a unique key by which each item in
+	 * the provided `data` array can be identified
+	 */
+	itemKey: PropTypes.string,
 	/**
 	 * Specify how far from the top the sticky header should be placed.
 	 * Use to make sure it's not covered by a navigation bar