请教：如何基于react-data-table-component实现多列排序

Hey there! Great question—react-data-table-component is such a solid library, but yeah, multi-column sorting isn't built right in. No worries though, we can absolutely build this using custom sort functions and React state management. Let's walk through the approach step by step:

We'll use React state to track a sort queue—this will hold the columns the user has selected for sorting (primary, secondary, tertiary, etc.) along with their sort direction (ascending/descending). Then we'll create a global custom sort function that uses this queue to compare rows column by column in the user's chosen order.

1. Initialize Sort State #

First, set up state to keep track of our sort queue. This will be an array of objects, each defining a column and its direction:

import { useState, useMemo } from 'react';
import DataTable from 'react-data-table-component';

const MyTable = ({ data }) => {
  // Format example: [{ column: 'name', direction: 'asc' }, { column: 'age', direction: 'desc' }]
  const [sortOrder, setSortOrder] = useState([]);

2. Handle Column Sort Clicks #

Instead of relying on the component's default sort behavior, we'll bind a custom handler to each column's onSort prop. This handler will update our sort queue:

• If the clicked column is already in the queue, toggle its direction (asc ↔ desc)
• If it's not in the queue, add it as the next priority sort
• Optional: Limit the queue to a maximum number of levels (e.g., 3) to avoid clutter

Here's the handler and how to attach it to columns:

const handleSort = (column) => {
  setSortOrder(prevOrder => {
    const existingEntryIndex = prevOrder.findIndex(item => item.column === column.name);
    
    if (existingEntryIndex !== -1) {
      // Toggle direction for the existing column
      const updatedOrder = [...prevOrder];
      updatedOrder[existingEntryIndex] = {
        ...updatedOrder[existingEntryIndex],
        direction: updatedOrder[existingEntryIndex].direction === 'asc' ? 'desc' : 'asc'
      };
      return updatedOrder;
    } else {
      // Add new column to the queue, keep only last 3 entries (limit to 3 levels)
      const newOrder = [...prevOrder, { column: column.name, direction: 'asc' }];
      return newOrder.slice(-3);
    }
  });
};

// Define your columns with the custom sort handler
const columns = [
  {
    name: 'Name',
    selector: row => row.name,
    sortable: true,
    onSort: handleSort, // Attach our custom handler
  },
  {
    name: 'Age',
    selector: row => row.age,
    sortable: true,
    onSort: handleSort,
  },
  // Add more columns as needed
];

3. Build the Custom Sort Function #

Next, create a function that sorts the data using our sortOrder queue. This function will iterate through each rule in the queue, comparing rows by the specified column until it finds a difference:

const customSort = (items) => {
  return [...items].sort((a, b) => {
    // Loop through each sort rule in priority order
    for (const rule of sortOrder) {
      const { column, direction } = rule;
      let comparison = 0;

      // Handle different data types (adjust based on your data)
      if (typeof a[column] === 'string') {
        // Case-insensitive string comparison
        comparison = a[column].toLowerCase().localeCompare(b[column].toLowerCase());
      } else if (typeof a[column] === 'number') {
        // Numeric comparison
        comparison = a[column] - b[column];
      }

      // If rows differ on this column, return the sorted result
      if (comparison !== 0) {
        return direction === 'asc' ? comparison : -comparison;
      }
    }
    // All columns match, keep original order
    return 0;
  });
};

4. Wire It All Up to the DataTable #

Finally, pass the sorted data to the table, and update column props to show the correct sort direction icons. We'll use useMemo to avoid re-sorting on every render unless the data or sort order changes:

// Memoize sorted data for performance
const sortedData = useMemo(() => customSort(data), [data, sortOrder]);

// Update columns to reflect current sort direction for each column
const columnsWithSortState = columns.map(col => ({
  ...col,
  sortDirection: sortOrder.find(item => item.column === col.name)?.direction || undefined,
}));

return (
  <DataTable
    columns={columnsWithSortState}
    data={sortedData}
    // Disable default sort behavior since we're handling it ourselves
  />
);
};

export default MyTable;

Bonus Optimizations #

• Visual Sort Hierarchy: Add small indicators (like ¹, ², ³) next to column headers to show which priority each sort has. You can modify the column's name prop to include these based on the queue order.
• Remove Sort: Add logic to let users remove a column from the queue (e.g., click a sorted column a third time to clear it from the queue).
• Persist Sort Order: Use localStorage to save the sort queue so it persists across page reloads.

内容的提问来源于stack exchange，提问作者JSnyder