Refactor Table API to only require a single top-level component

[adidahiya]

Right now, tables must be constructed using an API like this:

<Table>
     <Column .../>
     <Column .../>
     <Column .../>
</Table>

This works fine for static tables like the ones in the docs site and examples page, but it's not great for applications that have dynamic numbers of columns. The compiler doesn't do a good job of type inference when it comes to React children. I can't even do something like this:

const columns = someArray.map((e) => {
    return <Column .../>; // assume the right props are provided here
});

return <Table>{columns}</Table>;

This fails with:

Another thing this refactor opens up is easier API support for merged cells / headers / etc. Why I wrote React-Table ... is a good read for understanding these API decisions.

This does not mean we remove components like <Cell> and <ColumnHeader>; those are still useful for providing default implementations of certain renderers used in the table.

Discussed offline with @gscshoyru and @cmslewis

[crispamares]

FYI I've just updated a project (@blueprintjs/table v3.5) from Typescript 2.8 to Typescript 3.5 and now this error rises even with multiple fixed columns, (it works when passing just 1 column):

<Table
	className="vertical-align"
	defaultRowHeight={32}
	defaultColumnWidth={224}
	enableColumnResizing={false}
	enableRowHeader={false}
	numRows={data.length}
>
	<Column cellRenderer={this.renderCell} name={keyColumnName} />
	<Column cellRenderer={this.renderCell} name={valueColumnName} />
</Table>

The error:

Type '{ children: Element[]; onType?: ((index: number, kind: "value" | "key", value: string) => void) | undefined; className: string; defaultRowHeight: number; defaultColumnWidth: number; enableColumnResizing: false; enableRowHeader: false; numRows: number; }' is not assignable to type 'Partial<Pick<Readonly<{ children?: ReactNode; }> & Readonly<ITableProps>, "children" | "className" | "onCopy" | "columnWidths" | "bodyContextMenuRenderer" | "enableColumnInteractionBar" | ... 35 more ... | "defaultColumnWidth">>'.
  Types of property 'children' are incompatible.
    Type 'Element[]' is not assignable to type 'ReactElement<IColumnProps> | ReactElement<IColumnProps>[] | (string & ReactElement<IColumnProps>) | (string & ReactElement<IColumnProps>[]) | (number & ReactElement<IColumnProps>) | ... 11 more ... | undefined'.
      Type 'Element[]' is not assignable to type 'ReactElement<IColumnProps>[]'.
        Type 'Element' is not assignable to type 'ReactElement<IColumnProps>'.
          Types of property 'type' are incompatible.
            Type 'string | StatelessComponent<any> | ComponentClass<any, ComponentState>' is not assignable to type 'string | ComponentClass<IColumnProps, ComponentState> | StatelessComponent<IColumnProps>'.
              Type 'StatelessComponent<any>' is not assignable to type 'string | ComponentClass<IColumnProps, ComponentState> | StatelessComponent<IColumnProps>'.
                Type 'StatelessComponent<any>' is not assignable to type 'StatelessComponent<IColumnProps>'.
                  Types of property 'propTypes' are incompatible.
                    Type 'ValidationMap<any> | undefined' is not assignable to type 'ValidationMap<IColumnProps> | undefined'.
                      Type 'ValidationMap<any>' is missing the following properties from type 'ValidationMap<IColumnProps>': id, loadingOptions, cellRenderer, columnHeaderCellRenderer, and 3 more.ts(2322)

[getdir]

P2 for 4.5 years. woot