**Feature:** Add width to table columns

src/Table/README.md

@@ -11,6 +11,18 @@ You can render a simple use-case of the table by specifying a list of records an
 />
 ```
 
+### With Fixed Layout
+
+Tables perform better with a forced fixed layout, since the browser doesn't have to recalculate positions depending on the contents of the table. Here's what the same table looks like with a fixed layout.
+
+```js
+<Table
+  fixedLayout
+  data={[{ name: "Max", profession: "Carpenter" }, { name: "Moritz", profession: "Baker" }]}
+  columns={["name", "profession"]}
+/>
+```
+
 ### Simple Usage without Header
 
 ```js
@@ -78,6 +90,63 @@ const data = [
 />
 ```
 
+### With custom widths per column
+
+We can customize the look of the table by specifying a `width` property on certain columns.
+
+```jsx
+const data = [
+  {
+    name: "Mega Deal Dev",
+    lastUpdated: "2018-06-06",
+    tags: ["agent-view", "production"],
+    collaborators: [
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+    ],
+  },
+  {
+    name: "Mega Deal Dev",
+    lastUpdated: "2018-06-06",
+    tags: ["agent-view", "production"],
+    collaborators: [
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+    ],
+  },
+  {
+    name: "Toy Bundle",
+    lastUpdated: "2018-06-06",
+    tags: ["agent-view", "production"],
+    collaborators: [
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+      { photo: "https://graph.facebook.com/775278331/picture", name: "Tejas Kumar" },
+    ],
+  },
+]
+;<Table
+  data={data}
+  columns={[
+    { heading: "", cell: dataEntry => <Icon name="Box" color="info" /> },
+    { heading: "Name", width: 600, cell: dataEntry => dataEntry.name },
+    { heading: "Last updated", cell: dataEntry => dataEntry.lastUpdated },
+    {
+      heading: "Tags",
+      width: 100,
+      cell: dataEntry => dataEntry.tags.map((tag, tagIndex) => <Chip key={tagIndex}>{tag}</Chip>),
+    },
+    { heading: "Collaborators", cell: dataEntry => <AvatarGroup avatars={dataEntry.collaborators} /> },
+  ]}
+  onRowClick={(dataEntry, i) => console.log({ dataEntry, i })}
+/>
+```
+
 ### With icons
 
 ```jsx

src/Table/Table.tsx

@@ -23,22 +23,26 @@ export interface TableProps<T> extends DefaultProps {
   iconColor?: (dataEntry: T) => string
   /** Remove the header? */
   headless?: boolean
+  /** Fixed Layout for performance */
+  fixedLayout?: boolean
 }
 
 export interface Column<T> {
   heading: React.ReactNode
   cell: (dataEntry: T, index: number) => React.ReactNode
   sortOrder?: "asc" | "desc"
   onSortClick?: (order: "asc" | "desc") => void
+  width?: number
 }
 
-const Container = styled("table")(({ theme }) => ({
+const Container = styled("table")<{ fixedLayout: TableProps<any>["fixedLayout"] }>(({ theme, fixedLayout }) => ({
   width: "100%",
   backgroundColor: theme.color.white,
   textAlign: "left",
   borderCollapse: "collapse",
   fontSize: theme.font.size.small,
   fontFamily: theme.font.family.main,
+  tableLayout: fixedLayout ? "fixed" : "initial",
 }))
 
 const Tr = styled("tr")<{ hover?: boolean; clickable?: boolean }>(({ hover, theme, clickable }) => ({
@@ -88,13 +92,21 @@ const ThContent = styled("span")<{ sorted?: boolean }>`
   ${props => props.sorted && `color: ${props.theme.color.text.light};`};
 `
 
-const Td = styled("td")(({ theme }) => ({
+const Td = styled("td")<{ cellWidth?: Column<any>["width"] }>(({ theme, cellWidth }) => ({
   verticalAlign: "middle",
   borderBottom: `1px solid ${theme.color.separators.default}`,
   color: theme.color.text.default,
+  hyphens: "auto",
   "&:first-child": {
     paddingLeft: theme.space.small,
   },
+  ...(cellWidth
+    ? {
+        width: cellWidth,
+        wordBreak: "break-all",
+        wordWrap: "break-word",
+      }
+    : {}),
 }))
 
 const Actions = styled(Td)(({ theme }) => ({
@@ -148,6 +160,7 @@ function Table<T>({
   icon,
   iconColor,
   headless,
+  fixedLayout,
   ...props
 }: TableProps<T>) {
   const standardizedColumns: Array<Column<T>> = columns.map(column => {
@@ -164,7 +177,7 @@ function Table<T>({
   const hasIcons: boolean = Boolean(data[0]) && Boolean(icon) && Boolean(icon!(data[0]))
 
   return (
-    <Container {...props}>
+    <Container fixedLayout={fixedLayout} {...props}>
       {!headless && (
         <Thead>
           <Tr>
@@ -234,7 +247,9 @@ function Table<T>({
                   </IconCell>
                 )}
                 {standardizedColumns.map((column, columnIndex) => (
-                  <Td key={columnIndex}>{column.cell(dataEntry, dataEntryIndex)}</Td>
+                  <Td cellWidth={column.width} key={columnIndex}>
+                    {column.cell(dataEntry, dataEntryIndex)}
+                  </Td>
                 ))}
                 {rowAction}
                 {onRowClick &&

src/Table/__tests__/__snapshots__/Table.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Table Component Should render 1`] = `
     class="css-ar73w8-Messages"
   />
   <table
-    class="css-39fsjl"
+    class="css-je0z3e"
   >
     <thead
       class="css-x4ot8q"
@@ -22,7 +22,7 @@ exports[`Table Component Should render 1`] = `
         class="css-16kb41"
       >
         <td
-          class="css-1lbz3s3"
+          class="css-1duroev"
           colspan="0"
         >
           There are no records available