diff --git a/src/column.js b/src/column.js index bf3b667..e4df255 100644 --- a/src/column.js +++ b/src/column.js @@ -47,13 +47,17 @@ class Column extends React.Component { } _handleClick = (e) => { - if (this.props.onClick) this.props.onClick(e); + const { onClick, events, dataKey, value, rowIndex, rowData } = this.props; - this.props.events.columnClick(this.props.dataKey, this.props.value, this.props.rowIndex, this.props.rowData); + if (onClick) onClick(e); + + events.columnClick(dataKey, value, rowIndex, rowData); } _handleHover = (e) => { - this.props.events.columnHover(this.props.dataKey, this.props.value, this.props.rowIndex, this.props.rowData); + const { events, dataKey, value, rowIndex, rowData } = this.props; + + events.columnHover(dataKey, value, rowIndex, rowData); } } diff --git a/src/griddle.js b/src/griddle.js index 2384b4a..c7dc70d 100644 --- a/src/griddle.js +++ b/src/griddle.js @@ -42,21 +42,27 @@ export default class Griddle extends React.Component { } render() { - const events = this.getEvents(); const components = this.getComponents(); - const { styles, settings } = this; + const { Filter, SettingsToggle, Settings, Table, NoResults, Pagination } = components; + const childProps = { + ...this.props, + components, + styles: this.styles, + settings: this.settings, + events: this.getEvents() + }; + return (
- {/*TODO: Lets not duplicate these prop defs all over (events/components) */} - - - {this.state.showSettings ? : null } + + + {this.state.showSettings ? : null} {this.props.data && this.props.data.length > 0 ? - : - } + : + } - + ); } diff --git a/src/pagination.js b/src/pagination.js index d8cb2cb..f32b3e1 100644 --- a/src/pagination.js +++ b/src/pagination.js @@ -9,12 +9,14 @@ class Pagination extends React.Component { } render() { - const {style, className } = getStyleProperties(this.props, 'pagination'); + const { style, className } = getStyleProperties(this.props, 'pagination'); + const { hasPrevious, hasNext, events } = this.props; + const { getPreviousPage, getNextPage } = events; return (
- {this.props.hasPrevious ? : null } + {hasPrevious ? : null } {this._getSelect()} - {this.props.hasNext ? : null } + {hasNext ? : null }
); } diff --git a/src/settings.js b/src/settings.js index 1ab2f47..4e4cf58 100644 --- a/src/settings.js +++ b/src/settings.js @@ -47,10 +47,11 @@ class Settings extends React.Component { render() { const keys = Object.keys(this.props.renderProperties.columnProperties); const { style, className } = getStyleProperties(this.props, 'settings'); + const { toggleColumn, setPageSize } = this.props.events; var columns = this.props.allColumns.map(column => -1} />); @@ -58,21 +59,25 @@ class Settings extends React.Component { return (
{columns} - +
); } _getDisplayName = (column) => { const { renderProperties } = this.props; - if(renderProperties.columnProperties.hasOwnProperty(column)) { - return renderProperties.columnProperties[column].hasOwnProperty('displayName') ? - renderProperties.columnProperties[column].displayName : - column - } else if (renderProperties.hiddenColumnProperties.hasOwnProperty(column)) { - return renderProperties.hiddenColumnProperties[column].hasOwnProperty('displayName') ? - renderProperties.hiddenColumnProperties[column].displayName : - column + const { columnProperties, hiddenColumnProperties } = renderProperties; + + if(columnProperties.hasOwnProperty(column) && + columnProperties[column].hasOwnProperty('displayName')) { + + return columnProperties[column].displayName; + + } else if (hiddenColumnProperties.hasOwnProperty(column) && + hiddenColumnProperties[column].hasOwnProperty('displayName')) { + + return hiddenColumnProperties[column].displayName; + } return column; diff --git a/src/table-body.js b/src/table-body.js index 6320433..5593f04 100644 --- a/src/table-body.js +++ b/src/table-body.js @@ -11,20 +11,18 @@ class TableBody extends React.Component { } render() { + const { Row, components, events, styles, settings, renderProperties, tableProperties } = this.props; + const childProps = { components, events, styles, settings, tableProperties }; var rows = this.props.data .filter(data => data.visible === undefined || data.visible === true) .map((data, index) => - + rowProperties={renderProperties.rowProperties} + ignoredColumns={renderProperties.ignoredColumns} + columnProperties={renderProperties.columnProperties} + {...childProps} /> ); const { style, className } = getStyleProperties(this.props, 'tableBody'); diff --git a/src/table-heading-cell.js b/src/table-heading-cell.js index 0e7a04d..2384ea8 100644 --- a/src/table-heading-cell.js +++ b/src/table-heading-cell.js @@ -18,17 +18,17 @@ class TableHeadingCell extends React.Component { } render() { - const style = this.props.styles.getStyle({ - useStyles: this.props.settings.useGriddleStyles, - styles: this.props.styles.inlineStyles, + const { styles, settings, alignment, headerAlignment } = this.props; + const style = styles.getStyle({ + useStyles: settings.useGriddleStyles, + styles: styles.inlineStyles, styleName: 'columnTitle', - mergeStyles: this.props.alignment || this.props.headerAlignment ? - {textAlign: this.props.headerAlignment || this.props.alignment} : + mergeStyles: alignment || headerAlignment ? + {textAlign: headerAlignment || alignment} : null }); const { className } = getStyleProperties(this.props, 'tableHeadingCell'); - const { sorted } = this.props; return (
{ - let columnProperty = ColumnHelper.getColumnPropertyObject(renderProperties.columnProperties, column); - const showColumn = ColumnHelper.isColumnVisible(column, { columnProperties: renderProperties.columnProperties, ignoredColumns: renderProperties.ignoredColumns }); - const sortAscending = this.props.pageProperties && this.props.pageProperties.sortAscending; - const sorted = this.props.pageProperties && this.props.pageProperties.sortColumns.indexOf(column) > -1 - + const headings = columns.map(column => { + let columnProperty = ColumnHelper.getColumnPropertyObject(columnProperties, column); + const showColumn = ColumnHelper.isColumnVisible(column, { + columnProperties: columnProperties, + ignoredColumns: ignoredColumns + }); + const sortAscending = pageProperties && pageProperties.sortAscending; + const sorted = pageProperties && pageProperties.sortColumns.indexOf(column) > -1; const title = this.getColumnTitle(column); let component = null; + if(showColumn) { - component = (