React 表类不首先将字符串排序为数字

Question

一个名为 GenericTable 的表的通用类已被制作为使用反应表作为基础的反应组件：

import React from 'react'
import { translate } from '../../Translations'
import { toId } from '../../../utility/common'
import { useTable, useSortBy, usePagination, useFilters, useGlobalFilter } from 'react-table'

function Table({ id, tableConfig, columns, data, fileName, currPage, filterValue, sortArray, onPageChange, onFilterChange, onSortChange, noDataText }) {
  const filterTypes = React.useMemo(
    () => ({
      fuzzyText: filterRows,
      text: (rows, id, filterValue) => {
        return rows.filter((row) => {
          const rowValue = row.values[id]
          return rowValue !== undefined ? String(rowValue).toLowerCase().startsWith(String(filterValue).toLowerCase()) : true
        })
      },
    }),
    []
  )

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize, globalFilter, sortBy },
    visibleColumns,
    preGlobalFilteredRows,
    setGlobalFilter,
    rows,
  } = useTable(
    {
      columns,
      data,
      initialState: {
        pageIndex: currPage,
        pageSize: tableConfig.initialPageSize || 10,
        globalFilter: filterValue,
        sortBy: sortArray,
      },
      filterTypes,
    },
    useFilters,
    useGlobalFilter,
    useSortBy,
    usePagination
  )

  onPageChange = onPageChange.bind(this)
  onFilterChange = onFilterChange.bind(this)
  onSortChange = onSortChange.bind(this)

  React.useEffect(() => {
    onSortChange(sortBy)
  }, [sortBy])

  let paginationArray = [10, 20, 30, 40, 50]
  if (tableConfig.initialPageSize && !paginationArray.includes(tableConfig.initialPageSize)) {
    paginationArray.push(tableConfig.initialPageSize)
    paginationArray.sort(function (a, b) {
      return a - b
    })
  }

  let scrollableClasses = tableConfig.scroll ? ' custom-scrollbar border-bottom' : ''
  let scrollHeightClass = tableConfig.scroll ? { maxHeight: tableConfig.scrollHeight } : {}

  return (
    <div>
      <table id={id + '-header'} className='text-center table table-striped table-sm rt-table' {...getTableProps()}>
        <thead className='rt-head'>
          <tr>
            <th style={{ border: 'none' }} colSpan={visibleColumns.length}>
              <div className='align-items-center d-flex justify-content-between'>
                <div className={tableConfig.showFilter ? '' : ' d-none'}>
                  <GlobalFilter preGlobalFilteredRows={preGlobalFilteredRows} globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} onFilterChange={onFilterChange} />
                </div>
                <div className={tableConfig.showExport ? '' : ' d-none'}>
                  <CSVLink data={data} className='btn btn-block text-center' id={id + '-csv-export-button'} filename={fileName + '.csv'}>
                    {translate('generate_report')}
                  </CSVLink>
                </div>
              </div>
            </th>
          </tr>
          {createHeader(headerGroups)}
        </thead>
      </table>
      <div className={'rt-body' + scrollableClasses} style={scrollHeightClass}>
        <table id={id} className='text-center table table-striped table-sm'>
          <tbody className={tableConfig.scroll ? '' : 'border-bottom'} {...getTableBodyProps()}>
            {createRows(id, page, prepareRow, visibleColumns, noDataText)}
          </tbody>
        </table>
      </div>

      <div id={'pagination-bar'} className={'align-items-center justify-content-between' + (tableConfig.showPagination ? ' d-flex' : ' d-none')}>
        <div className='d-flex'>
          <select
            className='rt-paginate-page-selector'
            value={pageSize}
            onChange={(e) => {
              gotoPage(0)
              onPageChange(0)
              setPageSize(Number(e.target.value))
            }}
          >
            {paginationArray.map((pageSize) => (
              <option key={pageSize} value={pageSize}>
                {pageSize}
              </option>
            ))}
          </select>
          <div>
            {translate('showing')} {1 + pageIndex * pageSize} {translate('to').toLowerCase()} {(pageIndex + 1) * pageSize < rows.length ? (pageIndex + 1) * pageSize : rows.length}{' '}
            {translate('of')}
            {' ' + rows.length} {translate('entries')}
          </div>
        </div>
        <div className='d-flex'>
          <button
            className='page-link rounded-left rt-paginate-button'
            onClick={() => {
              gotoPage(0)
              onPageChange(0)
            }}
            disabled={!canPreviousPage}
          >
            {'First'}
          </button>{' '}
          <button
            className='page-link rt-paginate-button'
            onClick={() => {
              previousPage()
              onPageChange(pageIndex - 1)
            }}
            disabled={!canPreviousPage}
          >
            {'Previous'}
          </button>{' '}
          <button
            className='page-link rt-paginate-button'
            onClick={() => {
              nextPage()
              onPageChange(pageIndex + 1)
            }}
            disabled={!canNextPage}
          >
            {'Next'}
          </button>{' '}
          <button
            className='page-link rounded-right rt-paginate-button'
            onClick={() => {
              gotoPage(pageCount - 1)
              onPageChange(pageCount - 1)
            }}
            disabled={!canNextPage}
          >
            {'Last'}
          </button>{' '}
        </div>
      </div>
    </div>
  )
}

export class GenericTable extends React.Component {
  constructor() {
    super()
    this.state = {}
  }

  render() {
    const { id, tableConfig, columns, data, fileName, page, filter, sort, onPageChange, onFilterChange, onSortChange, noDataText } = this.props

    return (
      <Table
        id={id}
        tableConfig={tableConfig}
        columns={columns}
        data={data}
        fileName={fileName}
        currPage={page}
        filterValue={filter}
        sortArray={sort}
        onPageChange={onPageChange}
        onFilterChange={onFilterChange}
        onSortChange={onSortChange}
        noDataText={noDataText}
      />
    )
  }
}

问题是那些以字母开头的行和以数字开头的行的表没有正确排序。

以数字开头的行排在以字母开头的行之后。

export class OperationalHistoryTable extends React.Component {
  constructor() {
    super()
    this.state = {
      table_filter: '',
      table_page: 0,
      table_sort: [
        {
          id: 'event_time',
          desc: true,
        },
      ],
    }
  }

  render() {
    var columns = [
      {
        header: translate('event_time'),
        accessor: 'event_time',
        width: '15%',
        Cell: (row) => {
          return filteredTime(row.cell.value)
        },
      },
      {
        header: translate('event_type'),
        accessor: 'event_type',
        width: '40%',
      },
      {
        header: translate('additional_info'),
        accessor: 'additional_info',
        width: '45%',
      },
    ]

    const tableConfig = {
      showFilter: true,
      showExport: true,
      showPagination: true,
      autoResetPage: false,
    }

    return (
      <GenericTable
        id='operational-history-table'
        tableConfig={tableConfig}
        columns={columns}
        data={this.eventHistoryData()}
        fileName='Operational History'
        page={this.state.table_page}
        filter={this.state.table_filter}
        sort={this.state.table_sort}
        onPageChange={(pageValue) => {
          this.setState({ table_page: pageValue })
        }}
        onFilterChange={(filter) => {
          this.setState({
            table_filter: filter,
            table_page: 0,
          })
        }}
        onSortChange={(sortBy) => {
          this.setState({ table_sort: sortBy })
        }}
        noDataText={translate('no_events')}
      />
    )
  }

我附上一张描述问题的图片。当我单击按升序列对行进行排序时，以数字开头的行放在末尾。

但是，仅包含字母的行的排序是正确的，例如，以字母“a”开头的行排在以字母“b”开头的行之前。

Answer 1

默认情况下，

useSortBy

钩子将文本值排在数字之前。要首先实现对数字进行排序的预期行为，您需要覆盖默认排序规则。

您需要用自己的规则覆盖

sortType

basic

值。

排序类型参数

排序类型：字符串 |函数（rowA：，rowB：，columnId：String，desc：Bool）

sortType

需要三个参数：要比较的两行和要考虑的列的标识符。

例子

声明自定义排序功能

const {
  // ...
} = useTable(
  {
    columns,
    data,
    initialState: {
      // ...
    },
    filterTypes,

    // Here --------
    sortTypes: {
      custom: (rowA, rowB, columnId) => {
        const a = rowA.values[columnId];
        const b = rowB.values[columnId];
        
        if (!isNaN(Number(a)) && !isNaN(Number(b))) {
          return Number(a) - Number(b);
        }
        return a.localeCompare(b);
      }
    },
    // -------------

  },
  useFilters,
  useGlobalFilter,
  useSortBy,
  usePagination
)

在您的专栏上使用您的排序功能

columns: [
  {
    Header: "Column #1",
    accessor: "column_1",
    sortType: "custom" // here
  },
  {
    Header: "Column #2",
    accessor: "column_2",
    sortType: "custom" // here
  }
]