如何使用blueprintjs/table渲染表

Question

我正在尝试显示一个blueprintjs表中的数据的json数组。表的呈现应该是动态的(行数和列数)，以便显示json数组中的内容。在生产环境中，json数组将来自API调用，但首先，我只是尝试让它在一些虚拟数据上工作。

我已经成功地动态生成了表并显示了列标题，但是我在生成实际的数据单元格时遇到了麻烦。

到目前为止，我的代码如下：

interface ResultsTableProps {}
interface ResultsTableState {
    numResultsRows? : number,
    results
}

export default class ResultsTable extends React.Component 
<ResultsTableProps, ResultsTableState> {

    public state: ResultsTableState = {
        numResultsRows: 0,
        results: null
    }

    componentDidMount() {
        var searchString = store.getState().submitSearch.searchString;

        // Pretend an API call just happened and the results object is returned

        // This is the dummy data
        var resultsObject = getData();
        this.setState({
            numResultsRows: resultsObject.length,
            results: resultsObject
        });
    }

    private createColumn(columnData) {
        return <Column name={columnData} />
    }

    private createColumns(columnDatas) {
        return Object.keys(columnDatas[0]["_source"]).map(this.createColumn);
    }

    private createTable(results, numResultsRows) {
        return (
            <Table numRows={numResultsRows}>
                {this.createColumns(results)}
            </Table>
        );
    }

    render() {
        return (            
            <div id="results-table">
                <Card interactive={false} elevation={Elevation.TWO} className={"pt-dark"}>
                    {this.createTable(this.state.results, this.state.numResultsRows)}
                </Card>
            </div>
        );
    }
}

当这段代码运行时，我得到了一个表，它有正确的行数和列数，也有正确的列标题。

现在我需要以某种方式用单元格/数据填充行，但我被卡住了。我不知道我该怎么做。

怎么做呢？

如果您想要查看虚拟数据：

[
{
    "_type": "location",
    "_id": "5sXFcmEBsayGTsLx1BqB",
    "_source": {
      "elevation": "",
      "country": "ZA",
      "geonameid": "958386",
      "timezone": "Africa/Johannesburg",
      "latitude": "-27.17494",
      "mod_date": "2014-10-01",
      "dem": "968",
      "admin1_fips": "08",
      "population": "0",
      "alternatenames": "",
      "feature_class": "S",
      "geohash": "k7pt6ubwx0n0",
      "name": "Sahara",
      "alt_cc": "",
      "fulltext": "ZA 958386 Africa/Johannesburg -27.17494 2014-10-01 968 08 0  S Sahara  DC8 Sahara FRM NC083 21.91872",
      "admin2": "DC8",
      "asciiname": "Sahara",
      "feature_code": "FRM",
      "admin3": "NC083",
      "longitude": "21.91872",
      "admin4": ""
    }
}
]

注意:我只对显示_source密钥中的数据感兴趣。因此，我的列的名称是"elevation“、"country”、"geonameid“等。单元格数据应该是这些键的值。我的实际虚拟数据实际上在数组中有大约20个这样的对象，但为了简单起见，我只是展示了一个。

Answer 1

不只是传递key，还可以传递key和value：

 private createColumns(columnDatas) {
    return Object.entries(columnDatas[0]["_source"]).map(this.createColumn);
 }

现在你可以像这样得到它：

private createColumn([key, value]) {
  //...
}

Answer 2

下面是一个更完整的示例。

    const data = [
      {foo: {bar: "baz"}},
      ...
    ]

// allows access to a deep object property by name
const getNestedProp = (obj, path) => (
  path.split('.').reduce((acc, part) => acc && acc[part], obj)
)

const objectCellRenderer = (key) => (rowIndex) => {
    return <Cell>{getNestedProp(data[rowIndex], key)}</Cell>

在呈现表格时，按如下方式定义列cellRenderer：

<Column name="someColumn" cellRenderer={objectCellRenderer("foo.bar")}/>

Answer 3

你只是错过了cellRenderer prop。

const createCell = (columnData) => (rowIndex) => {
    return (
      <Cell key={""}>{data[rowIndex][columnData]}</Cell>
    );
  };

完整的code =>

const SomeTable = () => {
  const [data, setData] = useState("");
  const [numDataRows, setNumDataRows] = useState(0);

  useEffect(() => {

    return 
      let fetchedData = []
// here you fetch data from somewhere
      ...
      setData(fetchedData);
      setNumDataRows(fetchedData.length);
    });
  }, []);

  const createCell = (columnData) => (rowIndex) => {
    return (
      <Cell key={rowIndex + columnData}>{data[rowIndex][columnData]}</Cell>
    );
  };

  const createColumn = (columnData, colIndex) => {
    return (
      <Column
        name={columnData}
        key={colIndex}
        cellRenderer={createCell(columnnData)}
      />
    );
  };

  const createColumns = (columnsData) => {
    return columnsData ? Object.keys(columnsData[0]).map(createColumn) : [];
  };

  const CreateTable = (data, numDataRows) => {
    return (
      <Table numRows={numPlayersRows}>
        {createColumns(data)}
      </Table>
    );
  };

  return <>{CreateTable(data, numDataRows)}</>;
};

export default SomeTable;