Skip to content

Commit

Permalink
Merge pull request #3 from jen-huang/responsive-tables
Browse files Browse the repository at this point in the history 
Responsive tables adjustments
  • Loading branch information
@cchaos
cchaos authored Apr 16, 2018
2 parents 9c88d5a + c689bd5 commit b4264aa
Show file tree
Hide file tree
Showing 8 changed files with 237 additions and 159 deletions.
55 changes: 29 additions & 26 deletions src-docs/src/views/tables/custom/custom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import {
EuiTableRowCell,
EuiTableRowCellCheckbox,
EuiTableSortMobile,
EuiTableSortMobileItem,
EuiTableHeaderMobile,
} from '../../../../../src/components';

Expand Down Expand Up @@ -356,34 +355,38 @@ export default class extends Component {
);
}

renderHeaderCells(mobile) {
return this.columns.map((column, columnIndex) => {
if (column.isCheckbox) {
if (!mobile) {
return (
<EuiTableHeaderCellCheckbox
key={column.id}
width={column.width}
>
{this.renderSelectAll()}
</EuiTableHeaderCellCheckbox>
);
}
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;
}

if (mobile) {
return (
<EuiTableSortMobileItem
renderHeaderCells() {
const headers = [];

this.columns.forEach((column, columnIndex) => {
if (column.isCheckbox) {
headers.push(
<EuiTableHeaderCellCheckbox
key={column.id}
onSort={column.isSortable ? this.onSort.bind(this, column.id) : undefined}
isSorted={this.state.sortedColumn === column.id}
isSortAscending={this.sortableProperties.isAscendingByName(column.id)}
width={column.width}
>
{column.label}
</EuiTableSortMobileItem>
{this.renderSelectAll()}
</EuiTableHeaderCellCheckbox>
);
} else {
return (
headers.push(
<EuiTableHeaderCell
key={column.id}
align={this.columns[columnIndex].alignment}
Expand All @@ -398,6 +401,8 @@ export default class extends Component {
);
}
});

return headers.length ? headers : null;
}

renderRows() {
Expand Down Expand Up @@ -557,9 +562,7 @@ export default class extends Component {
<EuiFlexGroup responsive={false} justifyContent="spaceBetween" alignItems="baseline">
<EuiFlexItem grow={false}>{this.renderSelectAll(true)}</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTableSortMobile anchorPosition="downRight">
{this.renderHeaderCells(true)}
</EuiTableSortMobile>
<EuiTableSortMobile items={this.getTableMobileSortItems()} />
</EuiFlexItem>
</EuiFlexGroup>
</EuiTableHeaderMobile>
Expand Down
165 changes: 95 additions & 70 deletions src/components/basic_table/__snapshots__/basic_table.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ exports[`EuiBasicTable basic - empty - custom message 1`] = `
<EuiTableRowCell
align="center"
colSpan={1}
isMobileFullWidth={true}
textOnly={true}
>
where my items at?
Expand Down Expand Up @@ -53,6 +54,7 @@ exports[`EuiBasicTable basic - empty - custom message as node 1`] = `
<EuiTableRowCell
align="center"
colSpan={1}
isMobileFullWidth={true}
textOnly={true}
>
<p>
Expand Down Expand Up @@ -93,6 +95,7 @@ exports[`EuiBasicTable basic - empty 1`] = `
<EuiTableRowCell
align="center"
colSpan={1}
isMobileFullWidth={true}
textOnly={true}
>
No items found
Expand Down Expand Up @@ -428,6 +431,7 @@ exports[`EuiBasicTable with pagination and error 1`] = `
<EuiTableRowCell
align="center"
colSpan={1}
isMobileFullWidth={true}
textOnly={true}
>
<EuiIcon
Expand Down Expand Up @@ -583,16 +587,19 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
>
<div>
<EuiTableHeaderMobile>
<EuiTableSortMobile>
<EuiTableSortMobileItem
isSortAscending={true}
isSorted={true}
key="_data_s_name_0"
onSort={[Function]}
>
Name
</EuiTableSortMobileItem>
</EuiTableSortMobile>
<EuiTableSortMobile
items={
Array [
Object {
"isSortAscending": true,
"isSorted": true,
"key": "_data_s_name_0",
"name": "Name",
"onSort": [Function],
},
]
}
/>
</EuiTableHeaderMobile>
<EuiTable>
<EuiTableHeader>
Expand Down Expand Up @@ -729,16 +736,19 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
>
<div>
<EuiTableHeaderMobile>
<EuiTableSortMobile>
<EuiTableSortMobileItem
isSortAscending={true}
isSorted={true}
key="_data_s_name_0"
onSort={[Function]}
>
Name
</EuiTableSortMobileItem>
</EuiTableSortMobile>
<EuiTableSortMobile
items={
Array [
Object {
"isSortAscending": true,
"isSorted": true,
"key": "_data_s_name_0",
"name": "Name",
"onSort": [Function],
},
]
}
/>
</EuiTableHeaderMobile>
<EuiTable>
<EuiTableHeader>
Expand Down Expand Up @@ -966,16 +976,19 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
>
<div>
<EuiTableHeaderMobile>
<EuiTableSortMobile>
<EuiTableSortMobileItem
isSortAscending={true}
isSorted={true}
key="_data_s_count_0"
onSort={[Function]}
>
Count
</EuiTableSortMobileItem>
</EuiTableSortMobile>
<EuiTableSortMobile
items={
Array [
Object {
"isSortAscending": true,
"isSorted": true,
"key": "_data_s_count_0",
"name": "Count",
"onSort": [Function],
},
]
}
/>
</EuiTableHeaderMobile>
<EuiTable>
<EuiTableHeader>
Expand Down Expand Up @@ -1112,16 +1125,19 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
>
<div>
<EuiTableHeaderMobile>
<EuiTableSortMobile>
<EuiTableSortMobileItem
isSortAscending={true}
isSorted={true}
key="_data_s_name_0"
onSort={[Function]}
>
Name
</EuiTableSortMobileItem>
</EuiTableSortMobile>
<EuiTableSortMobile
items={
Array [
Object {
"isSortAscending": true,
"isSorted": true,
"key": "_data_s_name_0",
"name": "Name",
"onSort": [Function],
},
]
}
/>
</EuiTableHeaderMobile>
<EuiTable>
<EuiTableHeader>
Expand Down Expand Up @@ -1258,16 +1274,19 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
>
<div>
<EuiTableHeaderMobile>
<EuiTableSortMobile>
<EuiTableSortMobileItem
isSortAscending={true}
isSorted={true}
key="_data_s_name_0"
onSort={[Function]}
>
Name
</EuiTableSortMobileItem>
</EuiTableSortMobile>
<EuiTableSortMobile
items={
Array [
Object {
"isSortAscending": true,
"isSorted": true,
"key": "_data_s_name_0",
"name": "Name",
"onSort": [Function],
},
]
}
/>
</EuiTableHeaderMobile>
<EuiTable>
<EuiTableHeader>
Expand Down Expand Up @@ -1489,16 +1508,19 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
>
<div>
<EuiTableHeaderMobile>
<EuiTableSortMobile>
<EuiTableSortMobileItem
isSortAscending={true}
isSorted={true}
key="_data_s_count_0"
onSort={[Function]}
>
Count
</EuiTableSortMobileItem>
</EuiTableSortMobile>
<EuiTableSortMobile
items={
Array [
Object {
"isSortAscending": true,
"isSorted": true,
"key": "_data_s_count_0",
"name": "Count",
"onSort": [Function],
},
]
}
/>
</EuiTableHeaderMobile>
<EuiTable>
<EuiTableHeader>
Expand Down Expand Up @@ -1706,16 +1728,19 @@ exports[`EuiBasicTable with sorting 1`] = `
>
<div>
<EuiTableHeaderMobile>
<EuiTableSortMobile>
<EuiTableSortMobileItem
isSortAscending={true}
isSorted={true}
key="_data_s_name_0"
onSort={[Function]}
>
Name
</EuiTableSortMobileItem>
</EuiTableSortMobile>
<EuiTableSortMobile
items={
Array [
Object {
"isSortAscending": true,
"isSorted": true,
"key": "_data_s_name_0",
"name": "Name",
"onSort": [Function],
},
]
}
/>
</EuiTableHeaderMobile>
<EuiTable>
<EuiTableHeader>
Expand Down
Loading

0 comments on commit b4264aa

Please sign in to comment.