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, };