Как отобразить таблицу с помощью blueprintjs/table

Question

Я пытаюсь отобразить массив данных json в таблице blueprintjs. Таблица должна динамически отображаться (количество строк и столбцов), чтобы отображать все, что находится в массиве 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 ключ. Таким образом, имена моих столбцов - "высота", "страна", "геонамед" и т. Д. И данные ячейки должны быть значениями этих ключей. Мои настоящие фиктивные данные на самом деле содержат около 20 таких объектов в массиве, но я только что показал один для краткости.

Answer 1

Вместо того, чтобы просто передавать ключ, можно передать ключ и значение:

 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 опора

      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;