Реактивная сортируемая таблица без сортировки - PullRequest
0 голосов
/ 02 мая 2018

Новый разработчик React здесь. Я пытаюсь создать сортируемую таблицу, и для начала я поймал следующий пример кода , который является хорошим началом. После этого я убрал некоторые вещи и сделал следующий короткий стол:

// Player Ranking Table Component
class PlayerRankings extends React.Component {
  constructor(props) {
    super(props);
  }

  generateRankData() {
    var data = [{rank: 1, week: 3, month: 2, player: "Steph", pos: "PG", team: "Warriors", war: 6, ws: 5.2}, {rank: 2, week: -1, month: -1, player: "Mike", pos: "PG", team: "Warriors", war: -4, ws: 5.2}, {rank: 3, week: 13, month: 5, player: "Paul", pos: "SG", team: "Knicks", war: 3, ws: 4.8}];
    
    return data;
  }
  render() {
    
    let rankData = this.generateRankData()
    let tableRows = rankData.map(row => (
      <tr>
        <td>{row.rank}</td>
        <td>{row.week}</td>
        <td>{row.month}</td>
        <td>{row.player}</td>
        <td>{row.pos}</td>
        <td>{row.team}</td>
        <td>{row.war}</td>
        <td>{row.ws}</td>
      </tr>
    ));
    
    // Here's my table
    let mytable = 
        <div id='rankings'>
          <table>
            <thead>
              <tr>
                <th><button className="sort" data-sort="rank">Rank</button></th>
                <th><button className="sort" data-sort="week">1-Week Change</button></th>
                <th><button className="sort" data-sort="month">1-Month Change</button></th>
                <th><button className="sort" data-sort="player">Player</button></th>
                <th><button className="sort" data-sort="position">Position</button></th>
                <th><button className="sort" data-sort="team">Team</button></th>
                <th><button className="sort" data-sort="war">WAR</button></th>
                <th><button className="sort" data-sort="ws">WS</button></th>
                <th><input className="search" placeholder="Search" /></th>

              </tr>
            </thead>     
            <tbody className='list'>
              {tableRows}
            </tbody>
          </table>
          <ul className="pagination"></ul>
        </div>

        
    var options = {
      valueNames: ['rank', 'week', 'month', 'player', 'position', 'team', 'war', 'ws']
    };
    
    var composersList = new List('rankings', options);
     
    return(
      <div>
        {mytable}
      </div>
    )
  }
}


ReactDOM.render(
  <PlayerRankings />,
  document.getElementById('root')
);
tr {
   border-bottom: 10px solid #CCC;
}

td {
  padding: 10px;
}


/* Style Table Headers */
.sort, button {
  padding: 8px 25px;
  border: none;
  display: inline-block;
  color: black;
  background-color: transparent;
  text-decoration: none;
  height: 30px;
  font-size: 0.9em;
  font-weight: bold;
}

.sort:hover {
  text-decoration: none;
  background-color: #DDD;
}

.sort:focus {
  outline: none;
}

.sort:after {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content: "";
  position: relative;
  top: -10px;
  right: -5px;
}

.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  content: "";
  position: relative;
  top: 4px;
  right: -5px;
}

.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000;
  content: "";
  position: relative;
  top: -4px;
  right: -5px;
}

input.search {
  float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' rel='stylesheet' type='text/css'>

<script src="http://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id='root'> </div>

К сожалению, мой фрагмент здесь вообще не работает из-за ошибки «Список не определен», из-за которой мне сложно продемонстрировать свой фактический вопрос, поэтому я не могу отсортировать свой список, нажав на кнопку заголовки. (Список не определен, ошибка не происходит локально на моей машине, однако список не сортируется локально для меня, что является ошибкой). Сортировка работает в коде, с которым я связан, но не в моем коде.

Буду очень признателен за любую помощь в работе с фрагментом кода, а также за помощь в выяснении причин, по которым моя таблица не сортируется. До тех пор я буду продолжать работать над этим.

Спасибо!

1 Ответ

0 голосов
/ 02 мая 2018

Чтобы выполнить сортировку, необходимо внести следующие изменения:

  1. Используйте ловушку жизненного цикла componentDidMount, чтобы сделать сортировку для таблицы

    componentDidMount() {
        var options = {
           valueNames: ['rank', 'week', 'month', 'player', 'position', 'team', 'war', 'ws']
        };
        var composersList = new List('rankings', options);
    }
    
  2. Назначьте className столбца для сортировки каждому <td>

    let tableRows = rankData.map(row => (
       <tr>
          <td className="rank">{row.rank}</td>
          ... more ...
       </tr>
    ));
    

пример кода - https://codepen.io/nagasai/pen/KRmzYg

...