From 61d5ca2c596fa41ecd504be4a4abee37295c4266 Mon Sep 17 00:00:00 2001 From: dangoo Date: Mon, 25 Sep 2017 15:04:09 +0200 Subject: [PATCH 1/2] Chore(eslint): Added indent rule for 2 spaces --- .eslintrc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc b/.eslintrc index a727c81de..643b1b2f7 100644 --- a/.eslintrc +++ b/.eslintrc @@ -15,6 +15,7 @@ "no-unused-vars": [ERROR, {"args": "all", "argsIgnorePattern": "^_"}], "react/jsx-uses-react": ERROR, "react/jsx-uses-vars": ERROR, - "prettier/prettier": ERROR + "prettier/prettier": ERROR, + "indent":[ERROR, 2] } } From 5e7166c8d17c029215f1a00826e3770d59e6f922 Mon Sep 17 00:00:00 2001 From: dangoo Date: Mon, 25 Sep 2017 15:18:43 +0200 Subject: [PATCH 2/2] Refactor(Table): Extracted columnHeaderRenderer --- docs/Table.md | 18 +++++++++ source/Table/Table.js | 45 ++++++++++++++------- source/Table/defaultColumnHeaderRenderer.js | 24 +++++++++++ source/Table/types.js | 9 +++++ 4 files changed, 82 insertions(+), 14 deletions(-) create mode 100644 source/Table/defaultColumnHeaderRenderer.js diff --git a/docs/Table.md b/docs/Table.md index 1487d6886..bdf58877f 100644 --- a/docs/Table.md +++ b/docs/Table.md @@ -11,6 +11,7 @@ This component expects explicit `width` and `height` parameters. | autoHeight | Boolean | | Outer `height` of `Table` is set to "auto". This property should only be used in conjunction with the `WindowScroller` HOC. | | children | [Column](Column.md) | ✓ | One or more Columns describing the data displayed in this table | | className | String | | Optional custom CSS class name to attach to root `Table` element. | +| columnHeaderRenderer | Function | | Responsible for rendering a column header given a header content element. [Learn more](#columnheaderrenderer) | | disableHeader | Boolean | | Do not render the table header (only the rows) | | estimatedRowSize | Number | | Used to estimate the total height of a `Table` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. | | gridClassName | String | | Optional custom CSS class name to attach to inner Grid element | @@ -99,6 +100,23 @@ The Table component supports the following static class names | ReactVirtualized__Table__sortableHeaderColumn | Applied to header columns that are sortable | | ReactVirtualized__Table__sortableHeaderIcon | SVG sort indicator | +### columnHeaderRenderer + +This is an advanced property. +It is useful for situations where you require additional hooks into `Table` (eg customizing the output tag name for each column header). +You may want to start by forking the [`defaultTableColumnHeaderRenderer`](https://github.com/bvaughn/react-virtualized/blob/master/source/Table/defaultColumnHeaderRenderer.js) function. + +This function accepts the following named parameters: + +| Property | Description | +|:---|:---| +| a11Props | A11y related properties | +| className | ColumnHeader class name | +| columData | Additional column data | +| headerContent | React node | +| key | Iterator key | +| style | Header style object | + ### headerRowRenderer This is an advanced property. diff --git a/source/Table/Table.js b/source/Table/Table.js index 6f72b7371..5ed340f97 100644 --- a/source/Table/Table.js +++ b/source/Table/Table.js @@ -8,6 +8,7 @@ import PropTypes from "prop-types"; import React, { PureComponent } from "react"; import { findDOMNode } from "react-dom"; import Grid, { accessibilityOverscanIndicesGetter } from "../Grid"; +import defaultColumnHeaderRenderer from "./defaultColumnHeaderRenderer"; import defaultRowRenderer from "./defaultRowRenderer"; import defaultHeaderRowRenderer from "./defaultHeaderRowRenderer"; import SortDirection from "./SortDirection"; @@ -40,6 +41,19 @@ export default class Table extends PureComponent { /** Optional CSS class name */ className: PropTypes.string, + /** + * Responsible for rendering a column header given a header content element: + * Should implement the following interface: ({ + * a11yProps: any, + * className: string, + * columnData: any, + * headerContent: any, + * key: string, + * style: any + * }): PropTypes.node + */ + columnHeaderRenderer: PropTypes.func, + /** Disable rendering the header at all */ disableHeader: PropTypes.bool, @@ -218,6 +232,7 @@ export default class Table extends PureComponent { }; static defaultProps = { + columnHeaderRenderer: defaultColumnHeaderRenderer, disableHeader: false, estimatedRowSize: 30, headerHeight: 0, @@ -474,8 +489,9 @@ export default class Table extends PureComponent { ); } - _createHeader({ column, index }) { + _createColumnHeader({ column, index }) { const { + columnHeaderRenderer, headerClassName, headerStyle, onHeaderClick, @@ -492,8 +508,9 @@ export default class Table extends PureComponent { columnData } = column.props; const sortEnabled = !disableSort && sort; + const key = `Header-Col${index}`; - const classNames = cn( + const className = cn( "ReactVirtualized__Table__headerColumn", headerClassName, column.props.headerClassName, @@ -503,7 +520,7 @@ export default class Table extends PureComponent { ); const style = this._getFlexStyleForColumn(column, headerStyle); - const renderedHeader = headerRenderer({ + const headerContent = headerRenderer({ columnData, dataKey, disableSort, @@ -553,16 +570,14 @@ export default class Table extends PureComponent { a11yProps.id = id; } - return ( -
- {renderedHeader} -
- ); + return columnHeaderRenderer({ + a11yProps, + className, + columnData, + headerContent, + key, + style + }); } _createRow({ rowIndex: index, isScrolling, key, parent, style }) { @@ -657,7 +672,9 @@ export default class Table extends PureComponent { const { children, disableHeader } = this.props; const items = disableHeader ? [] : React.Children.toArray(children); - return items.map((column, index) => this._createHeader({ column, index })); + return items.map((column, index) => + this._createColumnHeader({ column, index }) + ); } _getRowHeight(rowIndex) { diff --git a/source/Table/defaultColumnHeaderRenderer.js b/source/Table/defaultColumnHeaderRenderer.js new file mode 100644 index 000000000..d93cad362 --- /dev/null +++ b/source/Table/defaultColumnHeaderRenderer.js @@ -0,0 +1,24 @@ +/** @flow */ + +import type { ColumnHeaderRendererParams } from "./types"; + +import React from "react"; + +export default function defaultColumnHeaderRenderer({ + a11yProps, + className, + headerContent, + key, + style +}) { + return ( +
+ {headerContent} +
+ ); +} diff --git a/source/Table/types.js b/source/Table/types.js index 502d3ff87..73e648c6c 100644 --- a/source/Table/types.js +++ b/source/Table/types.js @@ -13,6 +13,15 @@ export type CellRendererParams = { rowIndex: number }; +export type ColumnHeaderRendererParams = { + a11yProps: ?any, + className: string, + columnData: ?any, + headerContent: any, + key: string, + style: any +}; + export type HeaderRowRendererParams = { className: string, columns: Array,