Добавить сортировку в MDBTable

Question

Я пытаюсь добавить сортировку к моей таблице. Я пытаюсь избежать переформатирования json со столбцами: [{}].
Вместо этого я хотел бы добавить опцию сортировки непосредственно в данные MDBTable.

Возможно ли это? Или я могу указать столбцы для таблицы MDBTable?

Приведенный ниже код работает нормально, но столбцы не сортируются.

render() {
  return (
    <div>
      <h1 className="text-center">Coronastatistik för sverige</h1>
      <MDBTable>
        <MDBTableHead>
          <tr>
            <th>Regtion</th>
            <th>Fall</th>
            <th>Fall per 100 000 invånare</th>
            <th>Procent av fall i Sverige</th>
          </tr>
        </MDBTableHead>
        <MDBTableBody>
          {this.state.regions.map(region => (
            <tr>
              <td>{region.Region}</td>
              <td>{region.Fall.toLocaleString()}</td>
              <td>{region.Incidens}</td>
              <td>{region.Procent} %</td>
            </tr>
          ))}
        </MDBTableBody>
      </MDBTable>
    </div>
    );
}

Answer 1

Чтобы иметь возможность сначала отсортировать MDBTable, вы должны сделать это как MDBDataTable. Затем в моем случае мне пришлось создать объект json с данными, которые ему необходимы. Для меня непростой задачей было понять, как построить подходящий объект json. Но после этого с таблицей проблем не возникло.

Для этого требуется объект в этом формате

data: {
columns: [{
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 150 }],
rows: [
      {
        name: 'Tiger Nixon',
        position: 'System Architect',
        office: 'Edinburgh',
        age: '61',
        date: '2011/04/25',
        salary: '$320'
      }}

Затем вы возвращаете MDBDataTable

return (
    <MDBDataTable
      striped
      bordered
      small
      data={data}
    />
  );