diff --git a/src/components/Table/body/styled/cell.js b/src/components/Table/body/styled/cell.js
index a4ff2e52a..4baf57866 100644
--- a/src/components/Table/body/styled/cell.js
+++ b/src/components/Table/body/styled/cell.js
@@ -5,7 +5,12 @@ const StyledCell = attachThemeAttrs(styled.th)`
padding: 0;
text-align: ${props => props.cellAlignment || 'left'};
box-sizing: border-box;
- height: 1px;
+ height: 1px; // This is needed for expanding the cell height in all browsers but doesn't work in Firefox
+
+ @-moz-document url-prefix() {
+ height: 100%; // This is needed for expanding the cell height in Firefox
+ }
+
:first-child > div {
padding-left: 18px;
diff --git a/src/components/Table/body/styled/row.js b/src/components/Table/body/styled/row.js
index e667eaf81..3c30db7c9 100644
--- a/src/components/Table/body/styled/row.js
+++ b/src/components/Table/body/styled/row.js
@@ -38,6 +38,9 @@ const StyledRow = attachThemeAttrs(styled.tr)`
`
background-color: ${replaceAlpha(props.palette.action.active, 0.4)};
`};
+
+ height: 1px; // This is needed for expanding the cell height in Firefox
+
`;
export default StyledRow;
diff --git a/src/components/Table/readme.md b/src/components/Table/readme.md
index 6124631c0..7f9a13e45 100644
--- a/src/components/Table/readme.md
+++ b/src/components/Table/readme.md
@@ -764,6 +764,219 @@ function TableListView() {
;
```
+# Table with expanded cell height
+##### In this example you can see how the data is displayed in the two variants of the table when one of the columns has the height of the cell expanded.
+
+```js
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Table, Column, ButtonGroup, ButtonIcon, Avatar, RadioButtonGroup } from 'react-rainbow-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+
+const options = [
+ { value: 'default', label: 'Default' },
+ { value: 'listview', label: 'Listview' },
+];
+
+
+const Container = styled.div`
+ padding: 0 2rem;
+`;
+
+const StyledTaskHeader = styled.span`
+ text-transform: uppercase;
+`;
+
+const StyledPriority = styled.div`
+ height: 100%;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 0;
+ text-transform: capitalize;
+ color: #ffffff;
+
+ ${props =>
+ props.priority === 'high' &&
+ `
+ background-color: #fc5e5f;
+ `};
+ ${props =>
+ props.priority === 'medium' &&
+ `
+ background-color: #fc9c44;
+ `};
+ ${props =>
+ props.priority === 'low' &&
+ `
+ background-color: #ffd86a;
+ `};
+`;
+
+const StyledValue = styled.span`
+ margin-left: 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+`;
+
+const StyledConstributor = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 40px;
+`;
+
+const StyledRadioContainer = styled.div`
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 20px;
+`;
+
+const StyledTask = styled.div`
+ text-align: left;
+ margin-left: 0.5rem;
+ margin-right: 0.5rem;
+`;
+
+const StyleCoin = styled(Coin)`
+ margin-right: 10px;
+ width: 20px;
+ height: 20px;
+`;
+
+const Task = ({ value }) => {value};
+
+const Description = () => (
+ <>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ >
+);
+
+const Coins = ({ value }) => (
+ <>
+
+ {value} coins
+ >
+);
+
+const Constributor = () => (
+
+
+
+);
+
+const priorityMap = ['low', 'medium', 'high'];
+const Priority = ({ value }) => {
+ const priority = priorityMap[value];
+ return (
+
+ {priority}
+
+ );
+};
+
+function TableListView() {
+ const [data, setData] = useState(ListviewDataTable);
+ const [sortedBy, setSortedBy] = useState();
+ const [sortDirection, setSortDirection] = useState('asc');
+ const [variant, setVariant] = useState('default');
+
+ const handleSort = (event, field, nextSortDirection) => {
+ const newData = [...data];
+ const key = value => value[field];
+ const reverse = nextSortDirection === 'asc' ? 1 : -1;
+
+ const sortedData = newData.sort((aItem, bItem) => {
+ const aValue = key(aItem);
+ const bValue = key(bItem);
+ return reverse * ((aValue > bValue) - (bValue > aValue));
+ });
+
+ setData(sortedData);
+ setSortedBy(field);
+ setSortDirection(nextSortDirection);
+ }
+
+ const handleOnChange = event => {
+ setVariant(event.target.value);
+ }
+
+ return (
+
+
+
+ }
+ />
+ }
+ />
+
+
+
+
+
+
+
+ Task}
+ field="task"
+ component={Task}
+ cellAlignment="left"
+ />
+
+
+ Description}
+ field="task"
+ component={Description}
+ cellAlignment="left"
+ />
+
+
+
+
+ );
+}
+
+ ;
+```
+
# Table "listview" variant, selectable and enumerated rows
##### The following example shows a version of the `listview` variant, where rows can be selectable and enumerated.