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 (
);
}
_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 = ( |