Responsive tables

CHANGELOG.md

@@ -4,6 +4,7 @@
 - `EuiForm` and `EuiFormRow` now accept nodes for `errors` prop ([#685](https://github.com/elastic/eui/pull/685))
 - Removed the default `max-width` from `EuiText`. This can still be applied by setting `grow={false}` ([#683](https://github.com/elastic/eui/pull/683))
 - Added support for text alignment with `EuiTextAlign` ([#683](https://github.com/elastic/eui/pull/683))
+- Added responsive support for tables. **Responsive table views are on by default.**  ([#584](https://github.com/elastic/eui/pull/584))
 
 **Bug fixes**
 

src-docs/src/components/guide_section/guide_section.js

@@ -186,19 +186,19 @@ export class GuideSection extends Component {
       }
       const cells = [
         (
-          <EuiTableRowCell key="name">
+          <EuiTableRowCell key="name" header="Prop">
             {humanizedName}
           </EuiTableRowCell>
         ), (
-          <EuiTableRowCell key="type">
+          <EuiTableRowCell key="type" header="Type">
             <EuiCode>{typeMarkup}</EuiCode>
           </EuiTableRowCell>
         ), (
-          <EuiTableRowCell key="defaultValue">
+          <EuiTableRowCell key="defaultValue" header="Default" hideForMobile={!defaultValue}>
             {defaultValueMarkup}
           </EuiTableRowCell>
         ), (
-          <EuiTableRowCell key="description">
+          <EuiTableRowCell key="description" header="Note" isMobileFullWidth={true} hideForMobile={!propDescription}>
             {descriptionMarkup}
           </EuiTableRowCell>
         )

src-docs/src/views/guidelines/button.js

@@ -479,7 +479,7 @@ export default() => (
 
       <EuiTableBody>
         <EuiTableRow>
-          <EuiTableRowCell>
+          <EuiTableRowCell isMobileHeader>
             <EuiButton>
               Add thing
             </EuiButton>
@@ -493,7 +493,7 @@ export default() => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell>
+          <EuiTableRowCell isMobileHeader>
             <EuiButtonEmpty size="s">
               Cancel
             </EuiButtonEmpty>
@@ -505,7 +505,7 @@ export default() => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell>
+          <EuiTableRowCell isMobileHeader>
             <EuiButton fill>
               Create thing
             </EuiButton>
@@ -519,7 +519,7 @@ export default() => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell>
+          <EuiTableRowCell isMobileHeader>
             <EuiButton color="danger" fill>
               Delete
             </EuiButton>&nbsp;&nbsp;
@@ -536,7 +536,7 @@ export default() => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell>
+          <EuiTableRowCell isMobileHeader>
             <EuiButton color="danger">
               Remove
             </EuiButton>&nbsp;&nbsp;
@@ -549,7 +549,7 @@ export default() => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell>
+          <EuiTableRowCell isMobileHeader>
             <EuiButton fill>
               Save
             </EuiButton>&nbsp;&nbsp;
@@ -574,7 +574,7 @@ export default() => (
 
     <EuiSpacer/>
 
-    <EuiTable>
+    <EuiTable responsive={false}>
       <EuiTableHeader>
         <EuiTableHeaderCell>
           Text

src-docs/src/views/tables/actions/actions.js

@@ -199,11 +199,20 @@ export class Table extends Component {
       field: 'firstName',
       name: 'First Name',
       truncateText: true,
-      sortable: true
+      sortable: true,
+      hideForMobile: true,
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
+      hideForMobile: true,
+    }, {
+      field: 'firstName',
+      name: 'Full Name',
+      isMobileHeader: true,
+      render: (name, item) => (
+        <span>{item.firstName} {item.lastName}</span>
+      ),
     }, {
       field: 'github',
       name: 'Github',
@@ -287,6 +296,8 @@ export class Table extends Component {
           pagination={pagination}
           sorting={sorting}
           selection={selection}
+          isSelectable={true}
+          hasActions={true}
           onChange={this.onTableChange}
         />
       </Fragment>

src-docs/src/views/tables/basic/basic.js

@@ -37,14 +37,23 @@ export const Table = () => {
     field: 'firstName',
     name: 'First Name',
     sortable: true,
+    hideForMobile: true,
     'data-test-subj': 'firstNameCell',
   }, {
     field: 'lastName',
     name: 'Last Name',
     truncateText: true,
+    hideForMobile: true,
     render: (name) => (
       <EuiLink href="#" target="_blank">{name}</EuiLink>
-    )
+    ),
+  }, {
+    field: 'firstName',
+    name: 'Full Name',
+    isMobileHeader: true,
+    render: (name, item) => (
+      <span>{item.firstName} <EuiLink href="#" target="_blank">{item.lastName}</EuiLink></span>
+    ),
   }, {
     field: 'github',
     name: 'Github',

src-docs/src/views/tables/custom/compressed.js

@@ -181,6 +181,7 @@ export default class extends Component {
         return (
           <EuiTableRowCell
             key={column.id}
+            header={column.label}
             align={column.alignment}
             truncateText={cell && cell.truncateText}
           >

src-docs/src/views/tables/custom/custom.js

@@ -26,6 +26,8 @@ import {
   EuiTableRow,
   EuiTableRowCell,
   EuiTableRowCellCheckbox,
+  EuiTableSortMobile,
+  EuiTableHeaderMobile,
 } from '../../../../../src/components';
 
 import {
@@ -207,11 +209,20 @@ export default class extends Component {
       alignment: LEFT_ALIGNMENT,
       width: '24px',
       cellProvider: cell => <EuiIcon type={cell} size="m" />,
+      hideForMobile: true,
     }, {
       id: 'title',
       label: 'Title',
       alignment: LEFT_ALIGNMENT,
       isSortable: true,
+      hideForMobile: true,
+    }, {
+      id: 'title_type',
+      label: 'Title',
+      isMobileHeader: true,
+      render: (title, item) => (
+        <span><EuiIcon type={item.type} size="m" style={{ verticalAlign: "text-top" }} /> {title}</span>
+      ),
     }, {
       id: 'health',
       label: 'Health',
@@ -332,37 +343,66 @@ export default class extends Component {
     return this.state.itemIdToOpenActionsPopoverMap[itemId];
   };
 
+  renderSelectAll = mobile => {
+    return (
+      <EuiCheckbox
+        id="selectAllCheckbox"
+        label={mobile ? 'Select all' : null}
+        checked={this.areAllItemsSelected()}
+        onChange={this.toggleAll.bind(this)}
+        type={mobile ? null : 'inList'}
+      />
+    );
+  }
+
+  getTableMobileSortItems() {
+    const items = [];
+    this.columns.forEach((column) => {
+      if (column.isCheckbox || !column.isSortable) {
+        return;
+      }
+      items.push({
+        name: column.label,
+        key: column.id,
+        onSort: this.onSort.bind(this, column.id),
+        isSorted: this.state.sortedColumn === column.id,
+        isSortAscending: this.sortableProperties.isAscendingByName(column.id),
+      });
+    });
+    return items.length ? items : null;
+  }
+
   renderHeaderCells() {
-    return this.columns.map((column, columnIndex) => {
+    const headers = [];
+
+    this.columns.forEach((column, columnIndex) => {
       if (column.isCheckbox) {
-        return (
+        headers.push(
           <EuiTableHeaderCellCheckbox
             key={column.id}
             width={column.width}
           >
-            <EuiCheckbox
-              id="selectAllCheckbox"
-              checked={this.areAllItemsSelected()}
-              onChange={this.toggleAll.bind(this)}
-              type="inList"
-            />
+            {this.renderSelectAll()}
           </EuiTableHeaderCellCheckbox>
         );
+      } else {
+        headers.push(
+          <EuiTableHeaderCell
+            key={column.id}
+            align={this.columns[columnIndex].alignment}
+            width={column.width}
+            onSort={column.isSortable ? this.onSort.bind(this, column.id) : undefined}
+            isSorted={this.state.sortedColumn === column.id}
+            isSortAscending={this.sortableProperties.isAscendingByName(column.id)}
+            isMobileHeader={column.isMobileHeader}
+          >
+            {column.label}
+          </EuiTableHeaderCell>
+        );
       }
-
-      return (
-        <EuiTableHeaderCell
-          key={column.id}
-          align={this.columns[columnIndex].alignment}
-          width={column.width}
-          onSort={column.isSortable ? this.onSort.bind(this, column.id) : undefined}
-          isSorted={this.state.sortedColumn === column.id}
-          isSortAscending={this.sortableProperties.isAscendingByName(column.id)}
-        >
-          {column.label}
-        </EuiTableHeaderCell>
-      );
     });
+
+    return headers.length ? headers : null;
   }
 
   renderRows() {
@@ -389,7 +429,9 @@ export default class extends Component {
           return (
             <EuiTableRowCell
               key={column.id}
+              header={column.label}
               textOnly={false}
+              hasActions={true}
               align="right"
             >
               <EuiPopover
@@ -442,7 +484,11 @@ export default class extends Component {
           );
         }
 
-        if (column.cellProvider) {
+        if (column.render) {
+          const titleText = item.title.truncateText ? item.title.value : item.title;
+          const title = item.title.isLink ? <EuiLink href="">{item.title.value}</EuiLink> : titleText;
+          child = column.render(title, item);
+        } else if (column.cellProvider) {
           child = column.cellProvider(cell);
         } else if (cell.isLink) {
           child = <EuiLink href="">{cell.value}</EuiLink>;
@@ -455,9 +501,12 @@ export default class extends Component {
         return (
           <EuiTableRowCell
             key={column.id}
+            header={column.label}
             align={column.alignment}
             truncateText={cell && cell.truncateText}
             textOnly={cell ? cell.textOnly : true}
+            hideForMobile={column.hideForMobile}
+            isMobileHeader={column.isMobileHeader}
           >
             {child}
           </EuiTableRowCell>
@@ -468,6 +517,8 @@ export default class extends Component {
         <EuiTableRow
           key={item.id}
           isSelected={this.isItemSelected(item.id)}
+          isSelectable={true}
+          hasActions={true}
         >
           {cells}
         </EuiTableRow>
@@ -507,6 +558,15 @@ export default class extends Component {
 
         <EuiSpacer size="m" />
 
+        <EuiTableHeaderMobile>
+          <EuiFlexGroup responsive={false} justifyContent="spaceBetween" alignItems="baseline">
+            <EuiFlexItem grow={false}>{this.renderSelectAll(true)}</EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiTableSortMobile items={this.getTableMobileSortItems()} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiTableHeaderMobile>
+
         <EuiTable>
           <EuiTableHeader>
             {this.renderHeaderCells()}