Table Renames. render* -> *Renderer. Focus -> FocusedCell. *Header -> *HeaderCell.

packages/docs-app/src/examples/table-examples/cellLoadingExample.tsx

@@ -47,7 +47,7 @@ export class CellLoadingExample extends BaseExample<ICellLoadingExampleState> {
 
     private handleConfigurationChange = handleStringChange(configuration => {
         if (configuration === CellsLoadingConfiguration.RANDOM) {
-            // calculate random numbers just once instead of inside renderCell which is called during table scrolling
+            // calculate random numbers just once instead of inside cellRenderer which is called during table scrolling
             const randomNumbers: number[] = [];
             const numberOfCells = bigSpaceRocks.length * Object.keys(bigSpaceRocks[0]).length;
             for (let i = 0; i < numberOfCells; i++) {
@@ -60,7 +60,11 @@ export class CellLoadingExample extends BaseExample<ICellLoadingExampleState> {
 
     public renderExample() {
         return (
-            <Table numRows={bigSpaceRocks.length} renderRowHeader={this.renderRowHeaderCell} useInteractionBar={true}>
+            <Table
+                numRows={bigSpaceRocks.length}
+                rowHeaderCellRenderer={this.renderRowHeaderCell}
+                enableColumnInteractionBar={true}
+            >
                 {this.renderColumns()}
             </Table>
         );
@@ -87,8 +91,8 @@ export class CellLoadingExample extends BaseExample<ICellLoadingExampleState> {
             columns.push(
                 <Column
                     key={formattedColumnName}
-                    renderCell={this.renderCell}
-                    renderColumnHeader={this.renderColumnHeaderCell}
+                    cellRenderer={this.renderCell}
+                    columnHeaderCellRenderer={this.renderColumnHeaderCell}
                 />,
             );
         });

packages/docs-app/src/examples/table-examples/columnLoadingExample.tsx

@@ -66,7 +66,7 @@ export class ColumnLoadingExample extends BaseExample<IColumnLoadingExampleState
                     key={index}
                     loadingOptions={this.loadingOptions(index)}
                     name={this.formatColumnName(columnName)}
-                    renderCell={this.renderCell}
+                    cellRenderer={this.renderCell}
                 />,
             );
         });

packages/docs-app/src/examples/table-examples/tableDollarExample.tsx

@@ -11,10 +11,10 @@ import { Cell, Column, Table } from "@blueprintjs/table";
 
 export class TableDollarExample extends BaseExample<{}> {
     public renderExample() {
-        const renderCell = (rowIndex: number) => <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>;
+        const cellRenderer = (rowIndex: number) => <Cell>{`$${(rowIndex * 10).toFixed(2)}`}</Cell>;
         return (
             <Table numRows={10}>
-                <Column name="Dollars" renderCell={renderCell} />
+                <Column name="Dollars" cellRenderer={cellRenderer} />
             </Table>
         );
     }

packages/docs-app/src/examples/table-examples/tableEditableExample.tsx

@@ -36,10 +36,12 @@ export class TableEditableExample extends BaseExample<ITableEditableExampleState
 
     public render() {
         const columns = this.state.columnNames.map((_: string, index: number) => {
-            return <Column key={index} renderCell={this.renderCell} renderColumnHeader={this.renderColumnHeader} />;
+            return (
+                <Column key={index} cellRenderer={this.renderCell} columnHeaderCellRenderer={this.renderColumnHeader} />
+            );
         });
         return (
-            <Table numRows={7} useInteractionBar={true}>
+            <Table numRows={7} enableColumnInteractionBar={true}>
                 {columns}
             </Table>
         );

packages/docs-app/src/examples/table-examples/tableFormatsExample.tsx

@@ -81,11 +81,11 @@ export class TableFormatsExample extends BaseExample<{}> {
 
     public render() {
         return (
-            <Table isRowResizable={true} numRows={this.data.length}>
-                <Column name="Timezone" renderCell={this.renderTimezone} />
-                <Column name="UTC Offset" renderCell={this.renderOffset} />
-                <Column name="Local Time" renderCell={this.renderLocalTime} />
-                <Column name="Timezone JSON" renderCell={this.renderJSON} />
+            <Table enableRowResizing={true} numRows={this.data.length}>
+                <Column name="Timezone" cellRenderer={this.renderTimezone} />
+                <Column name="UTC Offset" cellRenderer={this.renderOffset} />
+                <Column name="Local Time" cellRenderer={this.renderLocalTime} />
+                <Column name="Timezone JSON" cellRenderer={this.renderJSON} />
             </Table>
         );
     }

packages/docs-app/src/examples/table-examples/tableFreezingExample.tsx

@@ -38,7 +38,7 @@ export class TableFreezingExample extends BaseExample<ITableFreezingExampleState
                 <Column
                     key={columnIndex}
                     name={`Column ${Utils.toBase26Alpha(columnIndex)}`}
-                    renderCell={this.renderCell}
+                    cellRenderer={this.renderCell}
                 />
             );
         });

packages/docs-app/src/examples/table-examples/tableLoadingExample.tsx

@@ -88,7 +88,9 @@ export class TableLoadingExample extends BaseExample<ITableLoadingExampleState>
         const columns: JSX.Element[] = [];
 
         Object.keys(bigSpaceRocks[0]).forEach((columnName, index) => {
-            columns.push(<Column key={index} name={this.formatColumnName(columnName)} renderCell={this.renderCell} />);
+            columns.push(
+                <Column key={index} name={this.formatColumnName(columnName)} cellRenderer={this.renderCell} />,
+            );
         });
 
         return columns;

packages/docs-app/src/examples/table-examples/tableReorderableExample.tsx

@@ -13,7 +13,7 @@ import { Cell, Column, Table, Utils } from "@blueprintjs/table";
 export interface ITableReorderableExampleState {
     columns?: JSX.Element[];
     data?: any[];
-    useInteractionBar?: boolean;
+    enableColumnInteractionBar?: boolean;
 }
 
 const REORDERABLE_TABLE_DATA = [
@@ -27,44 +27,46 @@ const REORDERABLE_TABLE_DATA = [
 export class TableReorderableExample extends BaseExample<ITableReorderableExampleState> {
     public state: ITableReorderableExampleState = {
         data: REORDERABLE_TABLE_DATA,
-        useInteractionBar: false,
+        enableColumnInteractionBar: false,
     };
 
-    private toggleUseInteractionBar = handleBooleanChange(useInteractionBar => this.setState({ useInteractionBar }));
+    private toggleUseInteractionBar = handleBooleanChange(enableColumnInteractionBar =>
+        this.setState({ enableColumnInteractionBar }),
+    );
 
     public componentDidMount() {
         const columns = [
-            <Column key="1" name="Letter" renderCell={this.renderLetterCell} />,
-            <Column key="2" name="Fruit" renderCell={this.renderFruitCell} />,
-            <Column key="3" name="Animal" renderCell={this.renderAnimalCell} />,
-            <Column key="4" name="Country" renderCell={this.renderCountryCell} />,
-            <Column key="5" name="City" renderCell={this.renderCityCell} />,
+            <Column key="1" name="Letter" cellRenderer={this.renderLetterCell} />,
+            <Column key="2" name="Fruit" cellRenderer={this.renderFruitCell} />,
+            <Column key="3" name="Animal" cellRenderer={this.renderAnimalCell} />,
+            <Column key="4" name="Country" cellRenderer={this.renderCountryCell} />,
+            <Column key="5" name="City" cellRenderer={this.renderCityCell} />,
         ];
         this.setState({ columns });
     }
 
     public componentDidUpdate(_nextProps: {}, nextState: ITableReorderableExampleState) {
-        const { useInteractionBar } = this.state;
-        if (nextState.useInteractionBar !== useInteractionBar) {
+        const { enableColumnInteractionBar } = this.state;
+        if (nextState.enableColumnInteractionBar !== enableColumnInteractionBar) {
             const nextColumns = React.Children.map(this.state.columns, (column: JSX.Element) => {
-                return React.cloneElement(column, { useInteractionBar });
+                return React.cloneElement(column, { enableColumnInteractionBar });
             });
             this.setState({ columns: nextColumns });
         }
     }
 
     public renderExample() {
-        const { useInteractionBar } = this.state;
+        const { enableColumnInteractionBar } = this.state;
         return (
             <Table
-                isColumnReorderable={true}
-                isColumnResizable={false}
-                isRowReorderable={true}
-                isRowResizable={false}
+                enableColumnReordering={true}
+                enableColumnResizing={false}
+                enableRowReordering={true}
+                enableRowResizing={false}
                 numRows={this.state.data.length}
                 onColumnsReordered={this.handleColumnsReordered}
                 onRowsReordered={this.handleRowsReordered}
-                useInteractionBar={useInteractionBar}
+                enableColumnInteractionBar={enableColumnInteractionBar}
             >
                 {this.state.columns}
             </Table>
@@ -74,7 +76,7 @@ export class TableReorderableExample extends BaseExample<ITableReorderableExampl
     protected renderOptions() {
         return (
             <Switch
-                checked={this.state.useInteractionBar}
+                checked={this.state.enableColumnInteractionBar}
                 label="Interaction bar"
                 onChange={this.toggleUseInteractionBar}
             />

packages/docs-app/src/examples/table-examples/tableSortableExample.tsx

@@ -35,11 +35,18 @@ abstract class AbstractSortableColumn implements ISortableColumn {
     constructor(protected name: string, protected index: number) {}
 
     public getColumn(getCellData: ICellLookup, sortColumn: ISortCallback) {
-        const renderCell = (rowIndex: number, columnIndex: number) => <Cell>{getCellData(rowIndex, columnIndex)}</Cell>;
+        const cellRenderer = (rowIndex: number, columnIndex: number) => (
+            <Cell>{getCellData(rowIndex, columnIndex)}</Cell>
+        );
         const renderMenu = this.renderMenu.bind(this, sortColumn);
-        const renderColumnHeader = () => <ColumnHeaderCell name={this.name} renderMenu={renderMenu} />;
+        const columnHeaderCellRenderer = () => <ColumnHeaderCell name={this.name} renderMenu={renderMenu} />;
         return (
-            <Column key={this.index} name={this.name} renderCell={renderCell} renderColumnHeader={renderColumnHeader} />
+            <Column
+                cellRenderer={cellRenderer}
+                columnHeaderCellRenderer={columnHeaderCellRenderer}
+                key={this.index}
+                name={this.name}
+            />
         );
     }
 
@@ -191,8 +198,8 @@ export class TableSortableExample extends BaseExample<{}> {
         const columns = this.state.columns.map(col => col.getColumn(this.getCellData, this.sortColumn));
         return (
             <Table
+                bodyContextMenuRenderer={this.renderBodyContextMenu}
                 numRows={numRows}
-                renderBodyContextMenu={this.renderBodyContextMenu}
                 selectionModes={SelectionModes.COLUMNS_AND_CELLS}
             >
                 {columns}