Feat/817 independant tagname

.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]
   }
 }

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.

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 (
-      <div
-        {...a11yProps}
-        key={`Header-Col${index}`}
-        className={classNames}
-        style={style}
-      >
-        {renderedHeader}
-      </div>
-    );
+    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) {

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 (
+    <div
+      {...a11yProps}
+      key={key}
+      className={className} 
+      style={style}
+    >
+      {headerContent}
+    </div>
+  );
+}

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<any>,