Renamed FlexTable->Table and FlexColumn->Column

Author: bvaughn

README.md

@@ -144,7 +144,7 @@ For example:
 ###### Public methods
 
 `Grid` and `Collection` components can be forcefully re-rendered using [`forceUpdate`](https://facebook.github.io/react/docs/component-api.html#forceupdate).
-For `FlexTable` and `List`, you'll need to call [`forceUpdateGrid`](https://github.com/bvaughn/react-virtualized/blob/master/docs/FlexTable.md#forceupdategrid)) to ensure that the inner `Grid` is also updated.
+For `Table` and `List`, you'll need to call [`forceUpdateGrid`](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#forceupdategrid)) to ensure that the inner `Grid` is also updated.
 
 Documentation
 ---------------
@@ -170,7 +170,7 @@ Here are some online demos of each component:
 * [CellMeasurer](https://bvaughn.github.io/react-virtualized/?component=CellMeasurer)
 * [Collection](https://bvaughn.github.io/react-virtualized/?component=Collection)
 * [ColumnSizer](https://bvaughn.github.io/react-virtualized/?component=ColumnSizer)
-* [FlexTable](https://bvaughn.github.io/react-virtualized/?component=FlexTable)
+* [Table](https://bvaughn.github.io/react-virtualized/?component=Table)
 * [Grid](https://bvaughn.github.io/react-virtualized/?component=Grid)
 * [InfiniteLoader](https://bvaughn.github.io/react-virtualized/?component=InfiniteLoader)
 * [ScrollSync](https://bvaughn.github.io/react-virtualized/?component=ScrollSync)

docs/ArrowKeyStepper.md

@@ -12,7 +12,7 @@ The appearance of this wrapper element can be customized using the `className` p
 |:---|:---|:---:|:---|
 | children | Function | ✓ | Function respondible for rendering children. This function should implement the following signature: `({ onSectionRendered: Function, scrollToColumn: number, scrollToRow: number }) => PropTypes.element` |
 | className | String |  | CSS class name to attach to the wrapper `<div>`. |
-| columnCount | Number | ✓ | Number of columns in grid; for `FlexTable` and `List` this property should always be `1`. |
+| columnCount | Number | ✓ | Number of columns in grid; for `Table` and `List` this property should always be `1`. |
 | rowCount | Number | ✓ | Number of rows in grid. |
 
 ### Children function
@@ -27,7 +27,7 @@ The child function is passed the following named parameters:
 
 ### Examples
 
-You can decorate any virtualized component (eg. `FlexTable`, `Grid`, or `List`) with arrow-key snapping like so:
+You can decorate any virtualized component (eg. `Table`, `Grid`, or `List`) with arrow-key snapping like so:
 
 ```javascript
 import React from 'react';

docs/FlexColumn.md renamed to docs/Column.md

@@ -1,4 +1,4 @@
-FlexColumn
+Column
 ---------------
 
 Describes the header and cell contents of a table column.
@@ -31,7 +31,7 @@ It should implement the following signature:
 function ({ columnData: any, dataKey: string, rowData: any }): any
 ```
 
-A [default `cellDataGetter`](https://github.com/bvaughn/react-virtualized/blob/master/source/FlexTable/defaultCellDataGetter.js) is provided that simply returns the attribute as a String.
+A [default `cellDataGetter`](https://github.com/bvaughn/react-virtualized/blob/master/source/Table/defaultCellDataGetter.js) is provided that simply returns the attribute as a String.
 This function expects to operate on either a vanilla Object or a Map-like object with a get method.
 You should override this default method if your data is calculated or requires any custom processing.
 
@@ -44,7 +44,7 @@ It should implement the following signature:
 function ({ cellData: any, columnData: any, dataKey: string, isScrolling: boolean, rowData: any, rowIndex: number }): node
 ```
 
-A [default `cellRenderer`](https://github.com/bvaughn/react-virtualized/blob/master/source/FlexTable/defaultCellRenderer.js) is provided that displays an attribute as a simple string
+A [default `cellRenderer`](https://github.com/bvaughn/react-virtualized/blob/master/source/Table/defaultCellRenderer.js) is provided that displays an attribute as a simple string
 You should override this default method if your data is some other type of object or requires custom formatting.
 
 #### headerRenderer
@@ -56,5 +56,5 @@ It should implement the following signature:
 function ({ columnData: any, dataKey: string, disableSort: boolean, label: string, sortBy: string, sortDirection: SortDirection }): element
 ```
 
-A [default `headerRenderer`](https://github.com/bvaughn/react-virtualized/blob/master/source/FlexTable/defaultHeaderRenderer.js) is provided that displays the column `label` along with a sort indicator if the column is sort-enabled and active.
+A [default `headerRenderer`](https://github.com/bvaughn/react-virtualized/blob/master/source/Table/defaultHeaderRenderer.js) is provided that displays the column `label` along with a sort indicator if the column is sort-enabled and active.
 You should override this default method if you want to customize the appearance of table columns.

docs/ColumnSizer.md

@@ -9,7 +9,7 @@ High-order component that auto-calculates column-widths for `Grid` cells.
 | children | Function | ✓ | Function respondible for rendering a virtualized Grid. This function should implement the following signature: `({ adjustedWidth: number, getColumnWidth: Function, registerChild: Function }) => PropTypes.element` |
 | columnMaxWidth | Number |  | Optional maximum allowed column width |
 | columnMinWidth | Number |  | Optional minimum allowed column width |
-| width | Number | ✓ | Width of Grid or `FlexTable` child |
+| width | Number | ✓ | Width of Grid or `Table` child |
 
 ### Children function
 

docs/InfiniteLoader.md

@@ -4,7 +4,7 @@ InfiniteLoader
 High-order component that manages just-in-time fetching of data as a user scrolls up or down in a list.
 
 Note that this component is inteded to assist with row-loading.
-As such it is best suited for use with `FlexTable` and `List` (although it can also be used with `Grid`).
+As such it is best suited for use with `Table` and `List` (although it can also be used with `Grid`).
 This HOC is not compatible with the `Collection` component.
 
 This is an advanced component and can be confusing in certain situations.

docs/README.md

@@ -4,11 +4,11 @@ Documentation
 ### Components
 
 * [Collection](Collection.md)
-* [FlexTable](FlexTable.md)
-  * [FlexColumn](FlexColumn.md)
-  * [SortDirection](SortDirection.md)
 * [Grid](Grid.md)
 * [List](List.md)
+* [Table](Table.md)
+  * [Column](Column.md)
+  * [SortDirection](SortDirection.md)
 
 ### High-Order Components
 

docs/SortDirection.md

@@ -1,7 +1,7 @@
 SortDirection
 ---------------
 
-Specifies which direction [FlexTable](FlexTable.md) data is currently sorted in.
+Specifies which direction [Table](Table.md) data is currently sorted in.
 
 #### SortDirection.ASC
 Sort items in ascending order.

docs/FlexTable.md renamed to docs/Table.md

@@ -1,4 +1,4 @@
-FlexTable
+Table
 ---------------
 
 Table component with fixed headers and virtualized rows for improved performance with large data sets.
@@ -7,10 +7,10 @@ This component expects explicit width, height, and padding parameters.
 ### Prop Types
 | Property | Type | Required? | Description |
 |:---|:---|:---:|:---|
-| children | [FlexColumn](FlexColumn.md) | ✓ | One or more FlexColumns describing the data displayed in this table |
-| className | String |  | Optional custom CSS class name to attach to root `FlexTable` element. |
+| 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. |
 | disableHeader | Boolean |  | Do not render the table header (only the rows) |
-| estimatedRowSize | Number |  | Used to estimate the total height of a `FlexTable` before all of its rows have actually been measured. The estimated total height is adjusted as rows are rendered. |
+| 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 |
 | gridStyle | Object |  | Optional inline style to attach to inner Grid element |
 | headerClassName | String |  | CSS class to apply to all column headers |
@@ -40,7 +40,7 @@ This component expects explicit width, height, and padding parameters.
 | sort | Function |  | Sort function to be called if a sortable header is clicked. `({ sortBy: string, sortDirection: SortDirection }): void` |
 | sortBy | String |  | Data is currently sorted by this `dataKey` (if it is sorted at all) |
 | sortDirection | [SortDirection](SortDirection.md) |  | Data is currently sorted in this direction (if it is sorted at all) |
-| style | Object |  | Optional custom inline style to attach to root `FlexTable` element. |
+| style | Object |  | Optional custom inline style to attach to root `Table` element. |
 | tabIndex | Number |  | Optional override of inner `Grid` tab index default; defaults to `0`. |
 | width | Number | ✓ | Width of the table |
 
@@ -49,67 +49,67 @@ This component expects explicit width, height, and padding parameters.
 ##### forceUpdateGrid
 Forcefull re-render the inner `Grid` component.
 
-Calling `forceUpdate` on `FlexTable` may not re-render the inner `Grid` since it uses `shallowCompare` as a performance optimization.
+Calling `forceUpdate` on `Table` may not re-render the inner `Grid` since it uses `shallowCompare` as a performance optimization.
 Use this method if you want to manually trigger a re-render.
 This may be appropriate if the underlying row data has changed but the row sizes themselves have not.
 
 ##### measureAllRows
-Pre-measure all rows in a `FlexTable`.
+Pre-measure all rows in a `Table`.
 
 Typically rows are only measured as needed and estimated heights are used for cells that have not yet been measured.
 This method ensures that the next call to getTotalSize() returns an exact size (as opposed to just an estimated one).
 
 ##### recomputeRowHeights (index: number)
 Recompute row heights and offsets after the specified index (defaults to 0).
 
-`FlexTable` has no way of knowing when its underlying list data has changed since it only receives a `rowHeight` property.
+`Table` has no way of knowing when its underlying list data has changed since it only receives a `rowHeight` property.
 If the `rowHeight` is a number it can compare before and after values but if it is a function that comparison is error prone.
 In the event that a dynamic `rowHeight` function is in use and the row heights have changed this function should be manually called by the "smart" container parent.
 
 This method will also force a render cycle (via `forceUpdate`) to ensure that the updated measurements are reflected in the rendered table.
 
 ### Class names
 
-The FlexTable component supports the following static class names
+The Table component supports the following static class names
 
 | Property | Description |
 |:---|:---|
-| FlexTable | Main (outer) element |
-| FlexTable__headerColumn | Header cell (similar to `thead > tr > th`) |
-| FlexTable__headerRow | Header row (similar to `thead > tr`) |
-| FlexTable__row | Table row (akin to `tbody > tr`) |
-| FlexTable__rowColumn | Table column (akin to `tbody > tr > td`) |
-| FlexTable__sortableHeaderColumn | Applied to header columns that are sortable |
-| FlexTable__sortableHeaderIcon | SVG sort indicator |
+| Table | Main (outer) element |
+| Table__headerColumn | Header cell (similar to `thead > tr > th`) |
+| Table__headerRow | Header row (similar to `thead > tr`) |
+| Table__row | Table row (akin to `tbody > tr`) |
+| Table__rowColumn | Table column (akin to `tbody > tr > td`) |
+| Table__sortableHeaderColumn | Applied to header columns that are sortable |
+| Table__sortableHeaderIcon | SVG sort indicator |
 
 ### rowRenderer
 
 This is an advanced property.
-It is useful for situations where you require additional hooks into `FlexTable` (eg integration with a library like `react-sortable-hoc`).
+It is useful for situations where you require additional hooks into `Table` (eg integration with a library like `react-sortable-hoc`).
 If you do want to override `rowRenderer` the easiest way is to decorate the default implementation like so:
 
 ```js
 import { SortableContainer, SortableElement } from 'react-sortable-hoc'
-import { defaultFlexTableRowRenderer, FlexTable } from 'react-virtualized'
+import { defaultTableRowRenderer, Table } from 'react-virtualized'
 
-const SortableFlexTable = SortableContainer(FlexTable)
-const SortableFlexTableRowRenderer = SortableElement(defaultFlexTableRowRenderer)
+const SortableTable = SortableContainer(Table)
+const SortableTableRowRenderer = SortableElement(defaultTableRowRenderer)
 
 function rowRenderer (props) {
-  return <SortableFlexTableRowRenderer {...props} />
+  return <SortableTableRowRenderer {...props} />
 }
 
-function CustomizedFlexTable (props) {
+function CustomizedTable (props) {
   return (
-    <SortableFlexTable
+    <SortableTable
       rowRenderer={rowRenderer}
       {...props}
     />
   )
 }
 ```
 
-If you require greater customization, you may want to fork the [`defaultFlexTableRowRenderer`](https://github.com/bvaughn/react-virtualized/blob/master/source/FlexTable/defaultRowRenderer.js) function.
+If you require greater customization, you may want to fork the [`defaultTableRowRenderer`](https://github.com/bvaughn/react-virtualized/blob/master/source/Table/defaultRowRenderer.js) function.
 
 This function accepts the following named parameters:
 
@@ -118,7 +118,7 @@ This function accepts the following named parameters:
 | className | Row-level class name |
 | columns | Array of React nodes |
 | index | Row index |
-| isScrolling | Boolean flag indicating if `FlexTable` is currently being scrolled |
+| isScrolling | Boolean flag indicating if `Table` is currently being scrolled |
 | onRowClick | Optional row `onClick` handler |
 | onRowDoubleClick | Optional row `onDoubleClick` handler |
 | onRowMouseOver | Optional row `onMouseOver` handler |
@@ -128,12 +128,12 @@ This function accepts the following named parameters:
 
 ### Examples
 
-Below is a very basic `FlexTable` example. This table has only 2 columns, each containing a simple string. Both have a fixed width and neither is sortable. [See here](../source/FlexTable/FlexTable.example.js) for a more full-featured example including custom cell renderers, sortable headers, and more.
+Below is a very basic `Table` example. This table has only 2 columns, each containing a simple string. Both have a fixed width and neither is sortable. [See here](../source/Table/Table.example.js) for a more full-featured example including custom cell renderers, sortable headers, and more.
 
 ```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { FlexTable, FlexColumn } from 'react-virtualized';
+import { Table, Column } from 'react-virtualized';
 import 'react-virtualized/styles.css'; // only needs to be imported once
 
 // Table data as a array of objects
@@ -144,7 +144,7 @@ const list = [
 
 // Render your table
 ReactDOM.render(
-  <FlexTable
+  <Table
     width={300}
     height={300}
     headerHeight={20}
@@ -154,17 +154,17 @@ ReactDOM.render(
       ({ index }) => list[index]
     }
   >
-    <FlexColumn
+    <Column
       label='Name'
       dataKey='name'
       width={100}
     />
-    <FlexColumn
+    <Column
       width={200}
       label='Description'
       dataKey='description'
     />
-  </FlexTable>,
+  </Table>,
   document.getElementById('example')
 );
 ```

docs/WindowScroller.md

@@ -1,11 +1,11 @@
 WindowScroller
 ---------------
 
-High-order component that enables a `FlexTable` or `List` component to be scrolled based on the window's scroll positions.
+High-order component that enables a `Table` or `List` component to be scrolled based on the window's scroll positions.
 This can be used to create layouts similar to Facebook or Twitter news feeds.
 
 **Note** that this HOC does not currently work with a horizontally-scrolling `Grid` as horizontal scrolls reset the internal `scrollTop`.
-This may change with a future release but for the time being this HOC is should be used with `FlexTable` or `List` only.
+This may change with a future release but for the time being this HOC is should be used with `Table` or `List` only.
 
 ### Prop Types
 | Property | Type | Required? | Description |

docs/customizingStyles.md

@@ -13,11 +13,11 @@ You can also customize component styles.
 Fork the react-virtualized `styles.css` file and load your own, totally custom styles.
 
 #### Global CSS
-Load an additional, external CSS file that defines global classes (eg. `FlexTable`, `FlexTable__row`) to append to default inline styles.
+Load an additional, external CSS file that defines global classes (eg. `Table`, `Table__row`) to append to default inline styles.
 
 Learn more about which class names a component supports in the [API docs](https://github.com/bvaughn/react-virtualized/blob/master/docs/).
 
 #### CSS Modules
-If you are using CSS modules you can specify custom class names to be appended to a component instance (eg. `FlexTable` supports `className`, `headerClassName`, and `rowClassName` properties).
+If you are using CSS modules you can specify custom class names to be appended to a component instance (eg. `Table` supports `className`, `headerClassName`, and `rowClassName` properties).
 
 Learn more about which class names are supported in the [API docs](https://github.com/bvaughn/react-virtualized/blob/master/docs/).

docs/usingAutoSizer.md

@@ -1,7 +1,7 @@
 Using AutoSizer
 ---------------
 
-The `AutoSizer` component decorates a React element and automatically manages `width` and `height` properties so that decorated element fills the available space. This simplifies usage of components like `Grid`, `FlexTable`, and `List` that require explicit dimensions.
+The `AutoSizer` component decorates a React element and automatically manages `width` and `height` properties so that decorated element fills the available space. This simplifies usage of components like `Grid`, `Table`, and `List` that require explicit dimensions.
 
 This guide covers a few of the most commonly asked questions about using the component.
 

playground/table.js

@@ -14,7 +14,7 @@ var App = React.createClass({
     for (var i = 0; i < NUM_COLUMNS; i++) {
       flexColumns.push(
         React.createElement(
-          ReactVirtualized.FlexColumn,
+          ReactVirtualized.Column,
           {
             dataKey: i,
             flexGrow: 1,
@@ -30,7 +30,7 @@ var App = React.createClass({
       null,
       function (params) {
         return React.createElement(
-          ReactVirtualized.FlexTable,
+          ReactVirtualized.Table,
           {
             height: params.height,
             overscanRowCount: 0,

source/ArrowKeyStepper/ArrowKeyStepper.example.js

@@ -27,7 +27,7 @@ export default class ArrowKeyStepperExample extends Component {
         />
 
         <ContentBoxParagraph>
-          This high-order component decorates a <code>List</code>, <code>FlexTable</code>, or <code>Grid</code> and responds to arrow-key events by scrolling one row or column at a time.
+          This high-order component decorates a <code>List</code>, <code>Table</code>, or <code>Grid</code> and responds to arrow-key events by scrolling one row or column at a time.
           Focus in the `Grid` below and use the left, right, up, or down arrow keys to move around within the grid.
         </ContentBoxParagraph>
 

source/AutoSizer/AutoSizer.example.js

@@ -54,7 +54,7 @@ export default class AutoSizerExample extends Component {
 
         {!hideDescription &&
           <ContentBoxParagraph>
-            This component decorates <code>List</code>, <code>FlexTable</code>, or any other component and automatically manages its width and height.
+            This component decorates <code>List</code>, <code>Table</code>, or any other component and automatically manages its width and height.
             It uses Sebastian Decima's <a href='https://github.com/sdecima/javascript-detect-element-resize' target='_blank'>element resize event</a> to determine the appropriate size.
             In this example <code>AutoSizer</code> grows to fill the remaining width and height of this flex column.
           </ContentBoxParagraph>