diff --git a/superset-frontend/src/components/AlteredSliceTag/index.jsx b/superset-frontend/src/components/AlteredSliceTag/index.jsx
index 051412fcd8..181079a117 100644
--- a/superset-frontend/src/components/AlteredSliceTag/index.jsx
+++ b/superset-frontend/src/components/AlteredSliceTag/index.jsx
@@ -165,6 +165,8 @@ export default class AlteredSliceTag extends React.Component {
Header: 'After',
},
];
+ // set the wrap text in the specific columns.
+ const columnsForWrapText = ['Control', 'Before', 'After'];
return (
diff --git a/superset-frontend/src/components/TableView/TableView.stories.tsx b/superset-frontend/src/components/TableView/TableView.stories.tsx
index e13ef1bf09..9d28ca38b4 100644
--- a/superset-frontend/src/components/TableView/TableView.stories.tsx
+++ b/superset-frontend/src/components/TableView/TableView.stories.tsx
@@ -43,16 +43,40 @@ InteractiveTableView.args = {
accessor: 'name',
Header: 'Name',
},
+ {
+ accessor: 'summary',
+ Header: 'Summary',
+ },
],
data: [
- { id: 123, age: 27, name: 'Emily' },
- { id: 321, age: 10, name: 'Kate' },
+ {
+ id: 123,
+ age: 27,
+ name: 'Emily',
+ summary:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
+ },
+ {
+ id: 321,
+ age: 10,
+ name: 'Kate',
+ summary:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
+ },
+ {
+ id: 321,
+ age: 10,
+ name: 'John Smith',
+ summary:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
+ },
],
initialSortBy: [{ id: 'name', desc: true }],
noDataText: 'No data here',
pageSize: 1,
showRowCount: true,
withPagination: true,
+ columnsForWrapText: ['Summary'],
};
InteractiveTableView.argTypes = {
diff --git a/superset-frontend/src/components/TableView/TableView.test.tsx b/superset-frontend/src/components/TableView/TableView.test.tsx
index 355eb3f117..9111eee077 100644
--- a/superset-frontend/src/components/TableView/TableView.test.tsx
+++ b/superset-frontend/src/components/TableView/TableView.test.tsx
@@ -191,3 +191,21 @@ test('should render the right page', () => {
expect(screen.getByText('Kate')).toBeInTheDocument();
expect(screen.queryByText('Emily')).not.toBeInTheDocument();
});
+
+test('should render the right wrap content text by columnsForWrapText', () => {
+ const props = {
+ ...mockedProps,
+ columnsForWrapText: ['Name'],
+ };
+ render( |