Блог

Сортировка таблицы React имеет 3 условия, default view , ascending и descending , как показано в их официальном примере https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting

Теперь я хочу сделать это только между ascending и descending и удалить представление по умолчанию. Я попытался отсортировать первый столбец по умолчанию

  useTable(
    {
      columns,
      data,
      initialState: {
        pageIndex: 0,
        pageSize: 10,
        sortBy: [
          {
            id: "asset",
            desc: false,
          },
        ],
      },
    },
  )
  

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

В документации useSortBy упоминается параметр disableSortRemove, который можно указать при вызове useTable .

Если true, не отсортированное состояние не будет доступно для столбцов после их сортировки.

Для тех, кто позже обратится к этому вопросу сортировки таблицы React, вот немного больше конкретики. Если вы используете disableSortRemove: true alone, у вас все равно самый первый щелчок будет «несортированным», а затем последующие щелчки будут отсортированы по возрастанию или убыванию. Возможно, это не тот пользовательский интерфейс, который вам нужен, поскольку нажатие кнопки, первое или нет, должно что-то делать, но с этой одной переменной при первом нажатии это не будет.

Чтобы вам не приходилось дважды нажимать кнопку сортировки, чтобы увидеть сортировку, сделайте это!

 const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns: tableColumns,
      data: tableData,
      disableSortRemove: true,
      defaultCanSort: true,
      initialState: {
        sortBy: [{ id: tableData[0]?.totalSeries?.totalSeries, desc: true }], //TODO: adjust TableData type file
      },
    },
    useSortBy
  );
  

Здесь мы добавили 3 вещи, а не только одну disableSortRemove: true . Мы добавили:

disableSortRemove: true , defaultCanSort: true , и initialState: { sortBy: [{ id: tableData[0]?.totalSeries?.totalSeries, desc: true }] // ВАЖНО: используйте здесь свою собственную форму данных },

Я не думаю, что вам нужен второй ( defaultCanSort: true ), НО первый и третий дают желаемый эффект: при загрузке страницы сортировка включена, и как только вы нажимаете кнопку сортировки, она сортируется противоположным образом.

Выполнено. Сортируется.

enableSortingRemoval:false ,

Включает / отключает возможность удаления сортировки для таблицы. Если true, то изменение порядка сортировки будет выглядеть следующим образом: ‘none’ -> ‘desc’ -> ‘asc’ -> ‘none’ -> …

Если false, то изменение порядка сортировки будет выглядеть следующим образом: ‘none’ -> ‘desc’ -> ‘asc’ -> ‘desc’ -> ‘asc’ -> …

Пожалуйста, найдите это свойство ‘enableSortingRemoval’ здесь- https://tanstack.com/table/v8/docs/api/features/sorting