How to use @blueprintjs/table - 10 common examples

intent={changed_value != raw_value ? Intent.WARNING : null}
                    onConfirm={async (value) =>
                        await db.updateStagingValue(value, result, rowIndex, colIndex, config)
                    }
                />
            )
        }

        return (
             castNull(result.values[row][col])}
                loadingOptions={
                    view.loading
                        ? [
                              TableLoadingOption.CELLS,
                              TableLoadingOption.COLUMN_HEADERS,
                              TableLoadingOption.ROW_HEADERS,
                          ]
                        : []
                }
            >
                {result.columns.map((name, colIndex) => (
                     (
                             <menu>
                                //     <menuitem> {

                                //         console.log('sort ascending', result)</menuitem></menu><table></table>

onConfirm={async (value) =>
                        await db.updateStagingValue(value, result, rowIndex, colIndex, config)
                    }
                />
            )
        }

        return (
             castNull(result.values[row][col])}
                loadingOptions={
                    view.loading
                        ? [
                              TableLoadingOption.CELLS,
                              TableLoadingOption.COLUMN_HEADERS,
                              TableLoadingOption.ROW_HEADERS,
                          ]
                        : []
                }
            >
                {result.columns.map((name, colIndex) => (
                     (
                             <menu>
                                //     <menuitem> {

                                //         console.log('sort ascending', result)
                                //     }} text="Sort Asc" /&gt;</menuitem></menu><table></table>

await db.updateStagingValue(value, result, rowIndex, colIndex, config)
                    }
                />
            )
        }

        return (
             castNull(result.values[row][col])}
                loadingOptions={
                    view.loading
                        ? [
                              TableLoadingOption.CELLS,
                              TableLoadingOption.COLUMN_HEADERS,
                              TableLoadingOption.ROW_HEADERS,
                          ]
                        : []
                }
            >
                {result.columns.map((name, colIndex) => (
                     (
                             <menu>
                                //     <menuitem> {

                                //         console.log('sort ascending', result)
                                //     }} text="Sort Asc" /&gt;
                                //     <menuitem></menuitem></menuitem></menu><table></table>

function getTableComponent(numCols: number, numRows: number, columnProps?: any, tableProps?: any) {
    // combine table overrides
    const getCellClipboardData = (row: number, col: number) => {
        return Utils.toBase26Alpha(col) + (row + 1);
    };

    const tablePropsWithDefaults = { numRows, getCellClipboardData, enableFocusedCell: true, ...tableProps };

    // combine column overrides
    const columnPropsWithDefaults = {
        cellRenderer: (rowIndex: number, columnIndex: number) => {
            return {Utils.toBase26Alpha(columnIndex) + (rowIndex + 1)};
        },
        ...columnProps,
    };
    const columns = Utils.times(numCols, index => {
        return ;
    });
    return {columns}<table></table>;
}

private getStyledRegionGroups() {
        // show 3 styled regions as samples
        return !this.state.showCustomRegions
            ? []
            : ([
                  {
                      className: "tbl-styled-region-success",
                      regions: [Regions.cell(0, 0, 3, 3)],
                  },
                  {
                      className: "tbl-styled-region-warning",
                      regions: [Regions.cell(2, 1, 8, 1)],
                  },
                  {
                      className: "tbl-styled-region-danger",
                      regions: [Regions.cell(5, 3, 7, 7)],
                  },
              ] as IStyledRegionGroup[]);
    }
}

private getStyledRegionGroups() {
        // show 3 styled regions as samples
        return !this.state.showCustomRegions
            ? []
            : ([
                  {
                      className: "tbl-styled-region-success",
                      regions: [Regions.cell(0, 0, 3, 3)],
                  },
                  {
                      className: "tbl-styled-region-warning",
                      regions: [Regions.cell(2, 1, 8, 1)],
                  },
                  {
                      className: "tbl-styled-region-danger",
                      regions: [Regions.cell(5, 3, 7, 7)],
                  },
              ] as IStyledRegionGroup[]);
    }
}

private getStyledRegionGroups() {
        // show 3 styled regions as samples
        return !this.state.showCustomRegions
            ? []
            : ([
                  {
                      className: "tbl-styled-region-success",
                      regions: [Regions.cell(0, 0, 3, 3)],
                  },
                  {
                      className: "tbl-styled-region-warning",
                      regions: [Regions.cell(2, 1, 8, 1)],
                  },
                  {
                      className: "tbl-styled-region-danger",
                      regions: [Regions.cell(5, 3, 7, 7)],
                  },
              ] as IStyledRegionGroup[]);
    }
}

private selectedRegionTransform = (region: IRegion) => {
        // convert cell selection to row selection
        if (Regions.getRegionCardinality(region) === RegionCardinality.CELLS) {
            return Regions.row(region.rows[0], region.rows[1]);
        }

        return region;
    };
}

private selectedRegionTransform = (region: IRegion) => {
        // convert cell selection to row selection
        if (Regions.getRegionCardinality(region) === RegionCardinality.CELLS) {
            return Regions.row(region.rows[0], region.rows[1]);
        }

        return region;
    };
}

type="button"
            icon="maximize"
            disabled={rows === 0 || disabled.enter}
            onClick={this.enterJson}
          >
            Enter JSON
          
          <button disabled="{step.length">Leave</button>
        
        <div style="{{clear:">
         console.log('handleOnSelect', x)}
          selectionModes={[RegionCardinality.CELLS]}
          rowHeaderCellRenderer={this.renderRowHeaderCell}
          enableColumnReordering
          enableFocusedCell
        &gt;
          {headers.map((header, i) =&gt;
            ,
          )}
        <table></table>
        <button disabled="">
      </button></div>
    )