Таблица семантического интерфейса пользователя, постоянная сортировка - PullRequest
Новая
       51

Таблица семантического интерфейса пользователя, постоянная сортировка

0 голосов
/ 12 декабря 2018

Есть ли способ сделать сортировку таблицы семантического интерфейса пользователя устойчивой при повторном рендеринге нескольких компонентов.Например, если я сортирую по возрастанию по столбцу «Имя», есть ли способ сделать так, чтобы этот вид сортировки оставался примененным, даже когда мой родительский компонент таблицы перерисовывается?

Есть ли способ сделать это без вмешательства в реализацию таблицы?

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Основываясь на ваших требованиях, я создал для вас пример. И вывод такой же, как на картинке.

enter image description here

Ввод и флажоквнизу симулируется добавление данных пользователем. После нажатия на кнопку «Отправить» данные будут добавлены в таблицу по порядку автоматически. Метод обработки добавления данных выглядит следующим образом: 

addDate1 = () => {

    const { column, data, direction} = this.state
    let addData = {
        name: this.state.inputName,
        age: this.state.inputAge,
        gender: this.state.gender
    }
    let newData = [...data,addData]
    if (!column){
        console.log('Please select a colume')
    } else if (column === 'name'){
        this.setState({
            column: 'name',
            data: _.sortBy(newData, ['name']),
            direction: 'ascending',
        })
    } else if (column === 'age'){
        this.setState({
            column: 'age',
            data: _.sortBy(newData, ['age']),
            direction: 'ascending',
        })
    } else if (column === 'gender'){
        this.setState({
            column: 'gender',
            data: _.sortBy(newData, ['gender']),
            direction: 'ascending',
        })
    } else {
        console.log('error')
    }
}

И рабочий пример здесь: https://codesandbox.io/s/github/stackOverflow166/setable

0 голосов
/ 14 декабря 2018

Конечно, вы можете установить имя столбца для сортировки (IE: «Имя») и направление («ASC» / «DESC») в вашем локальном состоянии / в состоянии избыточности, а затем применить сортировку на основе состояния при каждой перезагрузке.

Это хорошо продемонстрировано в DOCS: 

import _ from 'lodash'
import React, { Component } from 'react'
import { Table } from 'semantic-ui-react'

const tableData = [
  { name: 'John', age: 15, gender: 'Male' },
  { name: 'Amber', age: 40, gender: 'Female' },
  { name: 'Leslie', age: 25, gender: 'Female' },
  { name: 'Ben', age: 70, gender: 'Male' },
]

export default class TableExampleSortable extends Component {
  state = {
    column: null,
    data: tableData,
    direction: null,
  }

  handleSort = clickedColumn => () => {
    const { column, data, direction } = this.state

    if (column !== clickedColumn) {
      this.setState({
        column: clickedColumn,
        data: _.sortBy(data, [clickedColumn]),
        direction: 'ascending',
      })

      return
    }

    this.setState({
      data: data.reverse(),
      direction: direction === 'ascending' ? 'descending' : 'ascending',
    })
  }

  render() {
    const { column, data, direction } = this.state

    return (
      <Table sortable celled fixed>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell
              sorted={column === 'name' ? direction : null}
              onClick={this.handleSort('name')}
            >
              Name
            </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'age' ? direction : null}
              onClick={this.handleSort('age')}
            >
              Age
            </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'gender' ? direction : null}
              onClick={this.handleSort('gender')}
            >
              Gender
            </Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {_.map(data, ({ age, gender, name }) => (
            <Table.Row key={name}>
              <Table.Cell>{name}</Table.Cell>
              <Table.Cell>{age}</Table.Cell>
              <Table.Cell>{gender}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    )
  }
}

Ссылка: https://react.semantic -ui.com / collection / table / # Варианты-сортируемые

...