diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
index 7a7ba62826806..3fc02150abd42 100644
--- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
+++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
@@ -128,38 +128,30 @@ export class VisualizeListingTable extends React.Component {
renderHeader() {
return [
-
- Title
- ,
-
- Type
-
+ {
+ content: 'Title',
+ onSort: this.sortByTitle,
+ isSorted: this.state.sortedColumn === 'title',
+ isSortAscending: this.sortableProperties.isAscendingByName('title'),
+ },
+ {
+ content: 'Type',
+ onSort: this.sortByType,
+ isSorted: this.state.sortedColumn === 'type',
+ isSortAscending: this.sortableProperties.isAscendingByName('type'),
+ },
];
}
renderRowCells(item) {
return [
-
-
- {item.title}
-
- ,
-
-
- {this.renderItemTypeIcon(item)}
- {item.type.title}
-
-
+
+ {item.title}
+ ,
+
+ {this.renderItemTypeIcon(item)}
+ {item.type.title}
+
];
}
diff --git a/ui_framework/doc_site/src/views/table/listing_table.js b/ui_framework/doc_site/src/views/table/listing_table.js
index 96a40daba5275..04152b2a23675 100644
--- a/ui_framework/doc_site/src/views/table/listing_table.js
+++ b/ui_framework/doc_site/src/views/table/listing_table.js
@@ -4,24 +4,13 @@ import {
KuiButton,
KuiButtonIcon,
KuiPager,
- KuiTableRowCell,
- KuiTableHeaderCell,
KuiListingTable,
} from '../../../../components';
import {
- LEFT_ALIGNMENT,
RIGHT_ALIGNMENT
} from '../../../../services';
-function wrapInRowCell(cell, key, alignment = LEFT_ALIGNMENT) {
- return (
-
- {cell}
-
- );
-}
-
export class ListingTable extends React.Component {
constructor(props) {
super(props);
@@ -33,37 +22,49 @@ export class ListingTable extends React.Component {
{
id: '1',
cells: [
- wrapInRowCell(Alligator, 'title1'),
- wrapInRowCell(
, 'status1'),
- wrapInRowCell('Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', 'time1'),
- wrapInRowCell('1', 'order1', RIGHT_ALIGNMENT)
+ Alligator,
+ ,
+ 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
+ {
+ content: '1',
+ align: RIGHT_ALIGNMENT
+ },
]
},
{
id: '2',
cells: [
- wrapInRowCell(Boomerang, 'title2'),
- wrapInRowCell(, 'status2'),
- wrapInRowCell('Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', 'time2'),
- wrapInRowCell('10', 'order2', RIGHT_ALIGNMENT),
+ Boomerang,
+ ,
+ 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
+ {
+ content: '10',
+ align: RIGHT_ALIGNMENT
+ },
]
},
{
id: '3',
cells: [
- wrapInRowCell(Celebration, 'title3'),
- wrapInRowCell(, 'status3'),
- wrapInRowCell('Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', 'time3'),
- wrapInRowCell('100', 'order3', RIGHT_ALIGNMENT)
+ Celebration,
+ ,
+ 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
+ {
+ content: '100',
+ align: RIGHT_ALIGNMENT
+ },
]
},
{
id: '4',
cells: [
- wrapInRowCell(Dog, 'title4'),
- wrapInRowCell(, 'status4'),
- wrapInRowCell('Tue Dec 06 2016 12:56:15 GMT-0800 (PST)', 'time4'),
- wrapInRowCell('1000', 'order4', RIGHT_ALIGNMENT)
+ Dog,
+ ,
+ 'Tue Dec 06 2016 12:56:15 GMT-0800 (PST)',
+ {
+ content: '1000',
+ align: RIGHT_ALIGNMENT
+ },
]
}
];
@@ -109,21 +110,13 @@ export class ListingTable extends React.Component {
renderHeader() {
return [
-
- Title
- ,
-
- Status
- ,
-
- Date created
- ,
-
- Orders of magnitude
-
+ 'Title',
+ 'Status',
+ 'Date created',
+ {
+ content: 'Orders of magnitude',
+ align: RIGHT_ALIGNMENT
+ }
];
}
diff --git a/ui_framework/doc_site/src/views/table/listing_table_loading_items.js b/ui_framework/doc_site/src/views/table/listing_table_loading_items.js
index 16bfd890e093e..fd711d1fc4954 100644
--- a/ui_framework/doc_site/src/views/table/listing_table_loading_items.js
+++ b/ui_framework/doc_site/src/views/table/listing_table_loading_items.js
@@ -5,27 +5,22 @@ import {
KuiButtonIcon,
KuiPager,
KuiListingTable,
- KuiTableHeaderCell,
KuiListingTableLoadingPrompt,
} from '../../../../components';
+import {
+ RIGHT_ALIGNMENT
+} from '../../../../services';
+
function renderHeader() {
return [
-
- Title
- ,
-
- Status
- ,
-
- Date created
- ,
-
- Orders of magnitude
-
+ 'Title',
+ 'Status',
+ 'Date created',
+ {
+ content: 'Orders of magnitude',
+ align: RIGHT_ALIGNMENT
+ }
];
}
diff --git a/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js b/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js
index 94fb7f16b4351..d4e4c09a12515 100644
--- a/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js
+++ b/ui_framework/doc_site/src/views/table/listing_table_with_no_items.js
@@ -55,21 +55,13 @@ function renderPager() {
function renderHeader() {
return [
-
- Title
- ,
-
- Status
- ,
-
- Date created
- ,
-
- Orders of magnitude
-
+ 'Title',
+ 'Status',
+ 'Date created',
+ {
+ content: 'Orders of magnitude',
+ align: RIGHT_ALIGNMENT
+ }
];
}
diff --git a/ui_framework/src/components/table/listing_table/listing_table.js b/ui_framework/src/components/table/listing_table/listing_table.js
index 6bca489295ba9..1f9c8723159c8 100644
--- a/ui_framework/src/components/table/listing_table/listing_table.js
+++ b/ui_framework/src/components/table/listing_table/listing_table.js
@@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
+import _ from 'lodash';
+
import { KuiListingTableToolBar } from './listing_table_tool_bar';
import { KuiListingTableToolBarFooter } from './listing_table_tool_bar_footer';
import { KuiListingTableRow } from './listing_table_row';
@@ -11,11 +13,17 @@ import {
KuiTableBody,
KuiTableHeader,
KuiTable,
+ KuiTableHeaderCell,
} from '../../index';
+import {
+ LEFT_ALIGNMENT,
+ RIGHT_ALIGNMENT,
+} from '../../../services';
+
export function KuiListingTable({
rows,
- columns,
+ header,
pager,
toolBarActions,
onFilter,
@@ -54,7 +62,7 @@ export function KuiListingTable({
return (
= 0}
+ isSelected={selectedRowIds.indexOf(row.id) >= 0}
onSelectionChanged={toggleRow}
row={row}
/>
@@ -62,6 +70,24 @@ export function KuiListingTable({
});
}
+ function renderHeader() {
+ return header.map((cell, index) => {
+ let { content, ...props } = cell;
+ if (React.isValidElement(cell) || !_.isObject(cell)) {
+ props = [];
+ content = cell;
+ }
+ return (
+
+ {content}
+
+ );
+ });
+ }
+
function renderInnerTable() {
return (
@@ -70,7 +96,7 @@ export function KuiListingTable({
isChecked={areAllRowsChecked()}
onChange={toggleAll}
/>
- {columns}
+ {renderHeader()}
@@ -100,10 +126,29 @@ export function KuiListingTable({
}
KuiListingTable.PropTypes = {
- header: PropTypes.arrayOf(PropTypes.node),
+ header: PropTypes.arrayOf(
+ PropTypes.oneOf([
+ PropTypes.node,
+ PropTypes.shape({
+ content: PropTypes.node,
+ align: PropTypes.oneOf([LEFT_ALIGNMENT, RIGHT_ALIGNMENT]),
+ onSort: PropTypes.func,
+ isSortAscending: PropTypes.bool,
+ isSorted: PropTypes.bool,
+ }),
+ ]
+ )),
rows: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
- cells: PropTypes.arrayOf(PropTypes.node),
+ cells: PropTypes.arrayOf(
+ PropTypes.oneOf([
+ PropTypes.node,
+ PropTypes.shape({
+ content: PropTypes.node,
+ align: PropTypes.oneOf([LEFT_ALIGNMENT, RIGHT_ALIGNMENT]),
+ }),
+ ],
+ )),
})),
pager: PropTypes.node,
onItemSelectionChanged: PropTypes.func.isRequired,
diff --git a/ui_framework/src/components/table/listing_table/listing_table_row.js b/ui_framework/src/components/table/listing_table/listing_table_row.js
index b23ce21fb6a80..6defeeff5ae1a 100644
--- a/ui_framework/src/components/table/listing_table/listing_table_row.js
+++ b/ui_framework/src/components/table/listing_table/listing_table_row.js
@@ -1,25 +1,51 @@
import React from 'react';
import PropTypes from 'prop-types';
+import _ from 'lodash';
+
import {
KuiTableRow,
+ KuiTableRowCell,
KuiTableRowCheckBoxCell,
} from '../';
+import {
+ LEFT_ALIGNMENT,
+ RIGHT_ALIGNMENT,
+} from '../../../services';
+
export class KuiListingTableRow extends React.PureComponent {
onSelectionChanged = () => {
this.props.onSelectionChanged(this.props.row.id);
};
+ renderCells() {
+ return this.props.row.cells.map((cell, index) => {
+ let { content, ...props } = cell;
+ if (React.isValidElement(cell) || !_.isObject(cell)) {
+ props = [];
+ content = cell;
+ }
+ return (
+
+ {content}
+
+ );
+ });
+ }
+
render() {
- const { row, isChecked } = this.props;
+ const { isSelected } = this.props;
return (
- {row.cells}
+ {this.renderCells()}
);
}
@@ -28,8 +54,16 @@ export class KuiListingTableRow extends React.PureComponent {
KuiListingTableRow.PropTypes = {
row: PropTypes.shape({
id: PropTypes.string,
- cells: PropTypes.arrayOf(PropTypes.node),
+ cells: PropTypes.arrayOf(
+ PropTypes.oneOf([
+ PropTypes.node,
+ PropTypes.shape({
+ content: PropTypes.node,
+ align: PropTypes.oneOf([LEFT_ALIGNMENT, RIGHT_ALIGNMENT]),
+ })
+ ],
+ )),
}).isRequired,
onSelectionChanged: PropTypes.func.isRequired,
- isChecked: PropTypes.bool,
+ isSelected: PropTypes.bool,
};