feat: add sortEmpty option for comprehensive empty value handling

[jiji-hoon96]

A new sortEmpty option has been introduced to handle all types of empty values, including null, undefined, and empty strings.

The previous sortUndefined option was limited to undefined values and could not properly handle other forms of empty data commonly found in real-world scenarios.

Therefore, sortUndefined is deprecated, and the use of sortEmpty is recommended as a more comprehensive solution.

Key Changes

• Added sortEmpty: ‘first’ | ‘last’ | false option
• Support for isEmptyValue: custom empty value detection function
• Backward compatibility: Retains sortUndefined functionality and adds deprecation warning
• Testing: Added comprehensive unit tests
• Example: Implemented Excel-like sorting React example

Summary by CodeRabbit

• New Features

  • Added empty-value-aware sorting with options to place empty values first or last.
  • Introduced a customizable rule to define what counts as “empty.”
  • Provided a React example demonstrating Excel-like sorting behavior.
  • Added a deprecation notice guiding migration from the legacy undefined-sorting option.

• Tests

  • Added comprehensive test coverage for empty-value sorting, custom emptiness rules, precedence with legacy options, and default behaviors.

[coderabbitai[bot]]

Walkthrough

Adds a new React example demonstrating Excel-like sorting with empty-value handling, introduces sortEmpty and isEmptyValue options in table-core sorting, maintains backward compatibility with sortUndefined (with deprecation warning), updates sorting flow to consider empty values, and adds comprehensive tests for new behaviors.

Changes

Cohort / File(s)	Change Summary
Example UI (React demo) examples/react/excel-sorting/index.html, examples/react/excel-sorting/src/main.tsx, examples/react/excel-sorting/src/index.css	New React demo showcasing Excel-like sorting using sortEmpty and custom isEmptyValue; includes HTML entry, app logic, and styling.
Example build/config examples/react/excel-sorting/package.json, examples/react/excel-sorting/vite.config.ts, examples/react/excel-sorting/tsconfig.json, examples/react/excel-sorting/tsconfig.node.json	Adds Vite/TypeScript setup, scripts, dependencies, and local package aliases for the example.
Core sorting feature packages/table-core/src/features/RowSorting.ts, packages/table-core/src/utils/getSortedRowModel.ts	Exposes new options sortEmpty and isEmptyValue; emits dev warning for deprecated sortUndefined; updates sorting path to handle empty values with precedence over sortUndefined.
Tests packages/table-core/tests/sortEmpty.test.ts	New test suite covering sortEmpty ('first'/'last'), custom isEmptyValue, precedence vs sortUndefined, defaults, and disabled behavior.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant App as React App
  participant Table as useReactTable
  participant Sort as getSortedRowModel
  participant Col as Column Def

  User->>App: Click table header to sort
  App->>Table: Update sorting state
  Table->>Sort: Build sorted row model
  Sort->>Col: Read sortEmpty / isEmptyValue / sortUndefined

  alt sortEmpty set ('first'/'last')
    Note right of Sort: Empty-aware path
    Sort->>Sort: Compare A vs B emptiness via isEmptyValue
    alt One empty
      Sort-->>Table: Position per 'first'/'last'
    else Both empty
      Sort->>Sort: Defer to next criterion
    else Neither empty
      Sort->>Sort: Use sortingFn/invertSorting
    end
  else sortEmpty not set
    Note right of Sort: Legacy path
    Sort->>Sort: Apply sortUndefined handling
    Sort->>Sort: Otherwise use sortingFn
  end

  Note over Col: Dev mode<br/>warn if sortUndefined used<br/>without sortEmpty
  Table-->>App: Sorted rows
  App-->>User: Rendered table with order

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

I stack my rows with tidy cheer,
Empty cups to front or rear.
A whisk of sort, a hop of state,
I nudge the nulls to where they wait.
With gentle paws, I test each case—
Excel-ish order, hare-in-place. 🐇✨

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.