Skip to content

Commit

Permalink
Table Renames. render* -> *Renderer. Focus -> FocusedCell. *Header ->…
Browse files Browse the repository at this point in the history 
… *HeaderCell. (#1890)

This includes:

- allowMultipleSelection enableMultipleSelection
- fillBodyWithGhostCells enableGhostCells
- isColumnReorderable enableColumnReordering
- isColumnResizable enableColumnResizing
- isRowHeaderShown enableRowHeader
- isRowReorderable enableRowReordering
- isRowResizable enableRowResizing
- enableFocus enableFocusedCell
- onFocus onFocusedCell
- renderBody bodyRenderer
- renderBodyContextMenu bodyContextMenuRenderer
- renderColumnHeader columnHeaderCellRenderer
- renderRowHeader rowHeaderCellRenderer
- useInteractionBar enableColumnInteractionBar
  • Loading branch information
@themadcreator @adidahiya
themadcreator authored and adidahiya committed Dec 12, 2017
1 parent 8df9ab4 commit d1fb52e
Show file tree
Hide file tree
Showing 38 changed files with 736 additions and 548 deletions.
12 changes: 8 additions & 4 deletions packages/docs-app/src/examples/table-examples/cellLoadingExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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++) {
Expand All @@ -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>
);
Expand All @@ -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}
/>,
);
});
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-app/src/examples/table-examples/columnLoadingExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>,
);
});
Expand Down
4 changes: 2 additions & 2 deletions packages/docs-app/src/examples/table-examples/tableDollarExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
6 changes: 4 additions & 2 deletions packages/docs-app/src/examples/table-examples/tableEditableExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
10 changes: 5 additions & 5 deletions packages/docs-app/src/examples/table-examples/tableFormatsExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-app/src/examples/table-examples/tableFreezingExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export class TableFreezingExample extends BaseExample<ITableFreezingExampleState
<Column
key={columnIndex}
name={`Column ${Utils.toBase26Alpha(columnIndex)}`}
renderCell={this.renderCell}
cellRenderer={this.renderCell}
/>
);
});
Expand Down
4 changes: 3 additions & 1 deletion packages/docs-app/src/examples/table-examples/tableLoadingExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
38 changes: 20 additions & 18 deletions packages/docs-app/src/examples/table-examples/tableReorderableExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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>
Expand All @@ -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}
/>
Expand Down
15 changes: 11 additions & 4 deletions packages/docs-app/src/examples/table-examples/tableSortableExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
);
}

Expand Down Expand Up @@ -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}
Expand Down
Loading

1 comment on commit d1fb52e

@blueprint-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Table Renames. render* -> *Renderer. Focus -> FocusedCell. *Header -> *HeaderCell. (#1890)

Preview: documentation

Please sign in to comment.