fix(table): children of column should be kept in sync (#364)

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()
+  })
 })

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
 }