Repository: zeit-ui/react (ts)

Issue:
Table.Column not updating label prop when it's updated.
<!-- Please do NOT DELETE the template. -->
<!-- No template issues will be closed. -->

# Bug report 🐞

## Version & Environment

  - Chrome latest
  - Version of `zeit-ui/react`: ^1.8.0-canary.0

## Expection

When using a table like this:

```
() => {
  const data = [
    { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' },
    { property: 'Component', description: 'DOM element to use', type: 'string', default: '-' },
    { property: 'bold', description: 'Bold style', type: 'boolean', default: 'true' },
  ]
  const [state, setState] = React.useState(0)
  React.useEffect(() => {
    const interval = setInterval(() => {
      setState((old) => old + 1)
    }, 1000)
    return () => {
      clearInterval(interval)
    }
  }, [])
  return (
    <Table data={data}>
      <Table.Column prop="property" label="property" />
      <Table.Column prop="description" label={`description: ${state}`} />
      <Table.Column prop="type" label="type" />
      <Table.Column prop="default" label="default" />
    </Table>
  )
}
```

The description is not being updated. This is a "minimal" reproducable example, I'm not doing exactly this in my application.

## Actual results (or Errors)

The description label isn't being updated, even though the variable `state` is being updated. 



Pull request:
fix(table): children of column should be kept in sync
## Checklist

- [x] Fix linting errors
- [x] Tests have been added / updated (or snapshots)

## Change information

fixed #359 

Patch:
diff --git a/components/table/table-column.tsx b/components/table/table-column.tsx
index 41acb39..45e2935 100644
--- a/components/table/table-column.tsx
+++ b/components/table/table-column.tsx
@@ -28,7 +28,7 @@ const TableColumn: React.FC<React.PropsWithChildren<TableColumnProps>> = ({
         value: `${prop}`.trim(),
         width,
       })
-  }, [label, prop, width])
+  }, [children, label, prop, width])
 
   return null
 }


Test patch:
diff --git a/components/table/__tests__/index.test.tsx b/components/table/__tests__/index.test.tsx
index cfae28a..2457046 100644
--- a/components/table/__tests__/index.test.tsx
+++ b/components/table/__tests__/index.test.tsx
@@ -185,4 +185,22 @@ describe('Table', () => {
     expect(wrapper.find('thead').find('tr').at(0).text()).toBe('test2')
     expect(() => wrapper.unmount()).not.toThrow()
   })
+
+  it('the changes of children should be tracked', () => {
+    const Mock = ({ label }: { label: string }) => {
+      return (
+        <Table data={data}>
+          <Table.Column prop="description">{label}</Table.Column>
+        </Table>
+      )
+    }
+    const wrapper = mount(<Mock label="test1" />)
+    expect(wrapper.find('thead').find('tr').at(0).text()).toBe('test1')
+
+    act(() => {
+      wrapper.setProps({ label: 'test2' })
+    })
+    expect(wrapper.find('thead').find('tr').at(0).text()).toBe('test2')
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
 })