Skip to content

Conversation

prisis
Copy link
Member

@prisis prisis commented Aug 14, 2025

…rt functionality

  • Introduced a new SelectionModeToggle component to allow users to switch between comparison and export modes.
  • Enhanced user experience with tooltips providing context for each mode.
  • Updated TableHeadCell and FilterSubject components for improved styling and type definitions.

Summary by CodeRabbit

  • New Features
    • Added Selection Mode Toggle with Compare (max 10) and Export (unlimited) modes, with mode-aware toolbar actions.
    • Introduced a revamped Data Table: column sorting, resizing, reordering, pinning; row pinning; detail panels; per-column filters, global search toggle, density toggle, column visibility menu, copy-to-clipboard, and fullscreen mode.
  • Improvements
    • Virtualized table rendering for smoother performance and responsive layouts.
  • Bug Fixes
    • Selection reactivity updated; Select All disabled in Compare mode; consistent checkbox states.
  • Documentation
    • Updated guides for selection modes and data table usage.
  • Revert
    • Removed calendar date picker component.

prisis and others added 10 commits August 4, 2025 21:13
…rt functionality

- Introduced a new SelectionModeToggle component to allow users to switch between comparison and export modes.
- Enhanced user experience with tooltips providing context for each mode.
- Updated TableHeadCell and FilterSubject components for improved styling and type definitions.
…ata table

- Removed redundant cursor pointer styles from index.css to streamline CSS.
- Added a new TableConfig type definition to enhance type safety and configuration options for the data table.
- Updated data-export and toolbar components to utilize the new TableConfig type, improving code organization and maintainability.
- Added a new Selection Mode Toggle feature allowing users to switch between comparison (max 10 items) and export (unlimited items) modes.
- Enhanced selection logic to ensure proper handling of selection limits and reactivity to mode changes.
- Updated DataTable and related components to support the new selection modes, improving user experience and functionality.
- Fixed various issues related to selection handling and ensured backward compatibility with existing features.
…onents

- Standardized formatting in RegularTable and VirtualTable components by aligning JSX attributes and removing unnecessary line breaks.
- Enhanced readability in use-table hook by restructuring return statements and callback functions.
- Improved overall code organization and maintainability across data table components.
…actions

- Added a new DataTableActionBar component to provide a toolbar for actions related to selected rows in the data table.
- Implemented functionality for clearing row selections and displaying the count of selected rows.
- Integrated animations and tooltips for improved user experience and accessibility.
- Ensured compatibility with existing table functionalities and improved overall interaction design.
- Introduced several new components for the data table, including SelectionModeToggle, DataTableFilter, and various UI elements for improved user interaction.
- Implemented a new filtering system with customizable filter actions and operators, enhancing data manipulation capabilities.
- Refactored existing components for better organization and maintainability, including updates to the toolbar and pagination features.
- Improved overall user experience with tooltips and debounced input for filter fields, ensuring responsive and intuitive interactions.
- Removed deprecated components and streamlined code for better performance and readability.
- Introduced the highlight-words package to support text highlighting functionality within the data table.
- Added new test utilities and components for improved testing of data table features.
- Enhanced existing data table components with better type definitions and improved structure for maintainability.
- Updated various components to ensure compatibility with the new highlighting feature and improved user experience.
…d type refinements

- Added a new localization key for showing columns in the data table.
- Updated tooltip texts in various buttons to utilize localization for better user experience.
- Refactored button props to use more specific type definitions for improved type safety.
- Streamlined code in several components for better maintainability and readability.
…, and improved component structure

- Updated column IDs to use the "ano-" prefix for consistency.
- Added new localization keys for reset actions and improved existing ones for better user experience.
- Refactored components to include new TypeScript types and improved memoization for performance.
- Enhanced scrolling behavior and added debug listeners for better diagnostics.
- Cleaned up unused props and ensured proper handling of table references for better maintainability.
- Modified the development script in package.json to remove the explicit port setting, allowing Vite to use the default port for development.
Copy link

netlify bot commented Aug 14, 2025

Deploy Preview for ai-models-table ready!

Name Link
🔨 Latest commit 7848260
🔍 Latest deploy log https://app.netlify.com/projects/ai-models-table/deploys/689e5231a0d71700082c5b71
😎 Deploy Preview https://deploy-preview-16--ai-models-table.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

coderabbitai bot commented Aug 14, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

This PR removes legacy components, updates docs, revises package scripts/deps, and introduces a new, modular Data Table system (head/body/footer, buttons, virtualization, pinning, resizing, filtering, sorting) with extensive unit tests. It also adjusts an export in data-table-filter and adds migration/refactor documentation.

Changes

Cohort / File(s) Summary
Documentation updates
memory-bank/activeContext.md, memory-bank/progress.md
Rewrote achievements/progress to document a new Selection Mode Toggle (Compare vs Export) and updated next steps/considerations/status.
Package config
web/package.json
Unpinned dev port; added vitest/playwright scripts; adjusted Radix UI deps; added match-sorter/highlight libs; added dev deps (global-jsdom, vitest).
Data-table planning docs
web/src/components/data-table/MIGRATION_PROGRESS.md, .../REFACTOR_PLAN.md
Added detailed migration and refactor plans/status for the data table overhaul.
Removed legacy components
web/src/components/calendar-date-picker.tsx, web/src/components/data-table/column-header.tsx
Deleted CalendarDatePicker and old DataTableColumnHeader components.
DataTable filter export
web/src/components/data-table-filter/index.tsx
Switched to re-export default as DataTableFilter.
Data Table root
web/src/components/data-table/components/data-table.tsx
New DataTable component accepting either an existing TableInstance or options via useDataTable, rendering TablePaper.
Body components (implementation)
web/src/components/data-table/components/body/table-body*.tsx, .../table-detail-panel.tsx
Added TableBody, TableBodyRow, TableBodyCell, TableBodyCellValue, EmptyRow, Row grab/pin controls, and DetailPanel with virtualization, editing, copy, hover-reveal, and pinning support.
Head components (implementation)
web/src/components/data-table/components/head/table-head-cell*.tsx, .../table-head-row.tsx, .../table-head-cell-*.tsx
Added header cell/row with sorting, filtering (label/container), dragging (grab handle), resizing (resize handle), and virtualization support.
Footer components (implementation)
web/src/components/data-table/components/footer/table-footer*.tsx
Added footer rowgroup/row/cell with virtualization, pin awareness, grid layouts, and Mantine-prop parsing.
Buttons (implementation)
web/src/components/data-table/components/buttons/*.tsx
Added reusable controls: copy, expand (row/all), row pin, column pinning, grab handle, toggle filters/global filter/density/full screen, edit action buttons, show/hide columns.
Body tests
web/src/components/data-table/components/body/*.test.tsx
Extensive tests for body rendering, cells, empty rows, row grab/pin, detail panel, and overall body behavior incl. virtualization.
Head tests
web/src/components/data-table/components/head/*.test.tsx
Tests for header cell/row, filter label/container, sort label, resize/grab handles, and virtualization/sticky behavior.
Footer tests
web/src/components/data-table/components/footer/*.test.tsx
Tests for footer rowgroup/row/cell including virtualization, layout, and Mantine props.
Buttons tests
web/src/components/data-table/components/buttons/*.test.tsx
Tests for all new buttons: copy, expand, expand all, grab handle, row pin, column pinning, toggle filters/global filter/density, toggle row action menu, edit actions, show/hide columns.

Sequence Diagram(s)

sequenceDiagram
  participant App
  participant DataTable
  participant useDataTable
  participant TablePaper
  participant Head
  participant Body
  participant Footer
  participant Buttons

  App->>DataTable: props (table instance | options)
  alt Provided TableInstance
    DataTable->>TablePaper: table, features
  else Options provided
    DataTable->>useDataTable: options
    useDataTable-->>DataTable: table, features
    DataTable->>TablePaper: table, features
  end
  TablePaper->>Head: render (sorting/filtering/drag/resize)
  TablePaper->>Body: render (rows, virtualization, pinning, detail)
  TablePaper->>Footer: render (footer groups/virtualization)
  App->>Buttons: user actions (e.g., ExpandAll, ToggleFilters)
  Buttons->>table: update state (expand, filter, density, fullscreen)
  table-->>Head: re-render
  table-->>Body: re-render
  table-->>Footer: re-render
Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~90 minutes

Poem

A nibble of code, a hop through the grid,
I pinned rows neatly, then softly hid.
I sorted the clouds, filters in tow,
Chewed through the tests—onward I go!
With switches that twinkle and columns that glide,
This bunny ships tables with infinite pride. 🐇✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch new-table

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
🪧 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 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.

Copy link
Contributor

github-actions bot commented Aug 14, 2025

Thank you for following the naming conventions! 🙏

@prisis prisis merged commit bdccfb9 into main Aug 14, 2025
15 of 31 checks passed
@prisis prisis deleted the new-table branch August 14, 2025 21:19
Copy link
Contributor

🚂 You're on fire, @prisis! Three PRs merged and counting! 🔥🎉

Your consistent contributions are truly impressive. You're becoming a valued member of our community! 💖
Have you considered taking on some more challenging issues? We'd love to see what you can do! 💪

Remember, @prisis is always here to support you. Keep blazing that trail! 🚀

prisis added a commit that referenced this pull request Aug 14, 2025
This reverts commit bdccfb9, reversing
changes made to 537f8d8.
@prisis prisis restored the new-table branch August 14, 2025 21:40
prisis added a commit that referenced this pull request Aug 14, 2025
This reverts commit bdccfb9, reversing
changes made to 537f8d8.
Copy link
Contributor

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using our GitHub Discussions tab for questions.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 13, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant