react-bootstrap-table-next默认按最后更新时间降序排序失效问题求助

I see exactly what’s going on here—your listLastUpdated field is stored as a string in MM-DD-YYYY format, so when you sort it, the table is doing lexicographical (string) comparison instead of chronological date comparison. Your first attempt at a sortFunc didn’t work because you tried subtracting string values directly, which results in NaN and doesn’t trigger proper sorting logic.

Here’s how to fix this:

Step 1: Correct the Sort Function #

Inside your sortFunc, you need to convert those string dates into actual Date objects so you can compare their chronological values. Since your date string is in MM-DD-YYYY, we’ll split it into parts and create a valid Date (note: JavaScript’s Date constructor expects months to be 0-indexed):

{ 
  text: "LAST UPDATED", 
  dataField: 'listLastUpdated', 
  sort: true, 
  sortFunc: (a, b, order) => {
    // Helper to convert MM-DD-YYYY string to a Date object
    const parseDateString = (dateStr) => {
      const [month, day, year] = dateStr.split('-');
      return new Date(year, month - 1, day); // months are 0-indexed in JS Dates
    };

    const dateA = parseDateString(a);
    const dateB = parseDateString(b);

    // Compare timestamps for correct chronological sorting
    if (order === 'asc') {
      return dateA.getTime() - dateB.getTime();
    } else {
      return dateB.getTime() - dateA.getTime();
    }
  }
}

Why This Works #

• The parseDateString helper takes your formatted date string, splits it into month, day, and year, then creates a valid Date object using the year, adjusted month (minus 1), and day.
• By comparing the timestamps (milliseconds since epoch) of the two dates, we give the sort function numerical values to work with, ensuring rows are ordered chronologically instead of by string characters.

Alternative Cleaner Approach (Long-Term) #

If you can adjust your row data structure, avoid storing the formatted date string as your dataField. Instead, keep the original updated_at timestamp or Date object, and use a formatter to display the MM-DD-YYYY string. This eliminates the need to parse strings during sorting and keeps your data model cleaner:

{ 
  text: "LAST UPDATED", 
  dataField: 'updated_at', // Use the original date/timestamp from your data
  sort: true,
  formatter: (cell) => {
    // Format the raw date to MM-DD-YYYY for display
    const date = new Date(cell);
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const year = date.getFullYear();
    return `${month}-${day}-${year}`;
  }
}

This approach is more efficient because sorting happens directly on the raw date values, no string parsing required.

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