diff --git a/src/MLTable/MLTable.js b/src/MLTable/MLTable.js index 7b25aea0c..d68449d02 100644 --- a/src/MLTable/MLTable.js +++ b/src/MLTable/MLTable.js @@ -288,6 +288,7 @@ class MLTable extends React.Component { // onChange={(e) => this.handleEmbeddedTableChange(e, restructuredColumn, record)} /> ) + restructuredColumn.width = (this.state.columnExpandedStates[originalColumn.dataIndex] ? originalColumn.expandedWidth : originalColumn.width) } return restructuredColumn }) diff --git a/src/__snapshots__/11-Table.stories.storyshot b/src/__snapshots__/11-Table.stories.storyshot index 42ec888dd..b535dc7bf 100644 --- a/src/__snapshots__/11-Table.stories.storyshot +++ b/src/__snapshots__/11-Table.stories.storyshot @@ -318,7 +318,7 @@ exports[`Storyshots Data Display/MLTable Embedded Tables 1`] = ` class="ant-spin-container" >
+
+
+
+ + + + + + + + + + @@ -698,67 +716,557 @@ exports[`Storyshots Data Display/MLTable Embedded Tables 1`] = ` class="" >
-
- - - - - - - - - - - +
+
-
- - -
- Employee Number - -
- Department Number - -
- Department Name - -
- Job Titles - -
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + Employee Number + + +
+ + + + + + +
+ +
+ + 		+ +
+ + Department Number + + +
+ + + + + + +
+ +
+ + 		+ +
+ + Department Name + + +
+ + + + + + +
+ +
+ + 		+ +
+ + Job Titles + + +
+ +
+ 12315 + + d008 + + Research + +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + Job Title + + +
+ + + + + + +
+ +
+ + 		+ +
+ + From + + +
+ + + + + + +
+ +
+ + 		+ +
+ + To + + +
+ + + + + + +
+ +
+ +
+ Staff + + 1988-01-21 + + 1996-01-21 +
+ Senior Staff + + 1996-01-21 + + 9999-01-01 +
+
+
+
+
+
+
+
+
+
+
+ @@ -766,54 +1274,520 @@ exports[`Storyshots Data Display/MLTable Embedded Tables 1`] = ` class="" >
- - - +
+
-
- - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- Salary - -
+ +
+ + Salary + + +
+ + + + + + +
+ +
+ + 		+ +
+ + From + + +
+ + + + + + +
+ +
+ + 		+ +
+ + To + + +
+ + + + + + +
+ +
+ +
+ 56926 + + 1995-01-19 + + 1996-01-19 +
+ 51184 + + 1989-01-20 + + 1990-01-20 +
+ 60014 + + 1999-01-18 + + 2000-01-18 +
+ 47619 + + 1988-01-21 + + 1989-01-20 +
+ 58153 + + 1996-01-19 + + 1997-01-18 +
+ 51837 + + 1990-01-20 + + 1991-01-20 +
+ 56264 + + 1993-01-19 + + 1994-01-19 +
+ 59706 + + 1998-01-18 + + 1999-01-18 +
+ 62624 + + 2001-01-17 + + 2002-01-17 +
+ 63223 + + 2002-01-17 + + 9999-01-01 +
+
+
+ + + @@ -851,67 +1825,557 @@ exports[`Storyshots Data Display/MLTable Embedded Tables 1`] = ` class="" >
- - - - - - - - - - - - +
+
-
- - -
- Employee Number - -
- Department Number - -
- Department Name - -
- Job Titles - -
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + Employee Number + + +
+ + + + + + +
+ +
+ + 		+ +
+ + Department Number + + +
+ + + + + + +
+ +
+ + 		+ +
+ + Department Name + + +
+ + + + + + +
+ +
+ + 		+ +
+ + Job Titles + + +
+ +
+ 281328 + + d008 + + Research + +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + Job Title + + +
+ + + + + + +
+ +
+ + 		+ +
+ + From + + +
+ + + + + + +
+ +
+ + 		+ +
+ + To + + +
+ + + + + + +
+ +
+ +
+ Staff + + 1988-01-21 + + 1996-01-21 +
+ Senior Staff + + 1996-01-21 + + 9999-01-01 +
+
+
+
+
+
+
+
+
+
+ + @@ -919,54 +2383,520 @@ exports[`Storyshots Data Display/MLTable Embedded Tables 1`] = ` class="" >
- - - +
+
-
- - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- Salary - -
+ +
+ + Salary + + +
+ + + + + + +
+ +
+ + 		+ +
+ + From + + +
+ + + + + + +
+ +
+ + 		+ +
+ + To + + +
+ + + + + + +
+ +
+ +
+ 56926 + + 1995-01-19 + + 1996-01-19 +
+ 51184 + + 1989-01-20 + + 1990-01-20 +
+ 60014 + + 1999-01-18 + + 2000-01-18 +
+ 47619 + + 1988-01-21 + + 1989-01-20 +
+ 58153 + + 1996-01-19 + + 1997-01-18 +
+ 51837 + + 1990-01-20 + + 1991-01-20 +
+ 56264 + + 1993-01-19 + + 1994-01-19 +
+ 59706 + + 1998-01-18 + + 1999-01-18 +
+ 62624 + + 2001-01-17 + + 2002-01-17 +
+ 63223 + + 2002-01-17 + + 9999-01-01 +
+
+
+ + + diff --git a/stories/11-Table.sample-data.js b/stories/11-Table.sample-data.js index 16441485c..2b0cdd7e8 100644 --- a/stories/11-Table.sample-data.js +++ b/stories/11-Table.sample-data.js @@ -329,6 +329,7 @@ export const sampleNestedData = { title: 'Work Experience', dataIndex: 'work_experience', key: 'work_experience', + expandedWidth: 500, columns: [ { title: 'Employee Number', dataIndex: 'emp_no', key: 'emp_no', sorter: lessThanSorter('emp_no') }, { title: 'Department Number', dataIndex: 'dept_no', key: 'dept_no', sorter: lessThanSorter('dept_no') }, @@ -337,6 +338,7 @@ export const sampleNestedData = { title: 'Job Titles', dataIndex: 'titles', key: 'titles', + expandedWidth: 200, columns: [ { title: 'Job Title', dataIndex: 'title', key: 'title', sorter: lessThanSorter('title') }, { title: 'From', dataIndex: 'from_date', key: 'from_date', sorter: dateSorter('from_date') }, @@ -349,6 +351,7 @@ export const sampleNestedData = { title: 'Salary History', dataIndex: 'salary', key: 'salary', + expandedWidth: 350, columns: [ { title: 'Salary', dataIndex: 'salary', key: 'salary2', sorter: lessThanSorter('salary') }, { title: 'From', dataIndex: 'from_date', key: 'from_date', sorter: dateSorter('from_date') }, diff --git a/stories/11-Table.stories.jsx b/stories/11-Table.stories.jsx index 7f4cadd09..efce9211a 100644 --- a/stories/11-Table.stories.jsx +++ b/stories/11-Table.stories.jsx @@ -73,11 +73,15 @@ export const embeddedTables = () => { return (