lime-elements icon indicating copy to clipboard operation
lime-elements copied to clipboard
verified publisher icon Lundalogik

chore(table): update tabulator to 6

Open civing opened this issue 11 months ago • 6 comments

Summary by CodeRabbit

  • New Features

    • Added support for controlling the location of table pagination controls (top or bottom).
    • Introduced an example demonstrating table pagination with adjustable pagination control placement.

  • Bug Fixes

    • Improved vertical alignment of the "select all" checkbox in tables.
    • Corrected and unified CSS class naming for table layout and pagination styling.

  • Refactor

    • Enhanced integration with the table library for better typing and initialization handling.
    • Updated internal type usage for improved maintainability and clarity.

  • Chores

    • Upgraded table library dependencies to the latest versions.
    • Removed obsolete type declaration files.

Review:

  • [ ] Commits are atomic
  • [ ] Commits have the correct type for the changes made
  • [ ] Commits with breaking changes are marked as such

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

  • [ ] Chrome
  • [ ] Edge
  • [ ] Firefox

Linux:

  • [ ] Chrome
  • [ ] Firefox

macOS:

  • [ ] Chrome
  • [ ] Firefox
  • [ ] Safari

Mobile:

  • [ ] Chrome on Android
  • [ ] iOS

civing avatar Mar 06 '25 17:03 civing

[!IMPORTANT]

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

This update upgrades the tabulator-tables library and its TypeScript types, refactors all Tabulator-related imports and type annotations to use explicit named imports, and introduces a new table pagination example component. CSS selectors and styles for table components are adjusted for naming consistency and improved structure. No logic changes occur outside of type and initialization handling.

Changes

File(s) Change Summary
package.json, types/tabulator-tables/index.d.ts Upgraded tabulator-tables and @types/tabulator-tables dependencies; removed custom type declaration file for Tabulator.
src/components/table/columns.ts Refactored to use explicit Tabulator type imports; updated all type annotations to use imported types instead of Tabulator.*; removed internal interface; updated function and method signatures accordingly. No logic changes.
src/components/table/table-selection.ts Changed Tabulator import to named imports with explicit type aliases; updated all type annotations to match; added a guard clause in rowSelectorCellClick to handle a specific edge case. No other logic changes.
src/components/table/table-selection.spec.ts Updated test helper function type annotations to use explicitly imported Tabulator types. No logic or test changes.
src/components/table/table.tsx Refactored Tabulator integration to use named imports and explicit types; added paginationLocation property; introduced initialized flag for table state; refactored initialization and event listener logic; updated pagination, sorting, and column handling methods to new types; adjusted render logic for pagination controls.
src/components/table/examples/table-pagination.tsx Added new Stencil component demonstrating table pagination with selectable pagination control location; includes columns, data, state, and event handling for pagination location.
src/components/table/partial-styles/_row-selection.scss Adjusted .select-all checkbox vertical positioning (top property changed from 6px to 4px).
src/components/table/partial-styles/_table-main-layout.scss,
.../tabulator-custom-styles.scss,
.../table.scss		 Renamed CSS class selector .tabulator-tableHolder to .tabulator-tableholder for consistency; updated related selectors and properties; increased .select-all vertical position in custom styles; added padding-top to .tabulator-col-content; narrowed sortable column selector.
src/components/table/partial-styles/tabulator-arrow.scss Restructured and nested selectors for .tabulator-col-sorter; centralized arrow rotation styling; refined opacity and animation handling for sortable columns; simplified transforms.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant TableComponent
    participant TabulatorInstance
    participant DataSource

    User->>TableComponent: Set/change properties (data, columns, paginationLocation)
    TableComponent->>TabulatorInstance: Initialize or update Tabulator with options
    TabulatorInstance->>TableComponent: tableBuilt event
    TableComponent->>TabulatorInstance: Set data (remote or local)
    User->>TableComponent: Interacts with pagination controls
    TableComponent->>TabulatorInstance: Update page
    TabulatorInstance->>DataSource: Fetch data (if remote pagination)
    DataSource-->>TabulatorInstance: Return data
    TabulatorInstance->>TableComponent: pageLoaded event
    TableComponent->>User: Render updated table and pagination controls

sequenceDiagram
    participant ExampleComponent
    participant TableComponent

    ExampleComponent->>TableComponent: Render with columns, data, paginationLocation
    User->>ExampleComponent: Change pagination location via dropdown
    ExampleComponent->>TableComponent: Update paginationLocation prop
    TableComponent->>User: Render table with pagination controls at new location

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

✨ Finishing touches
🧪 Generate unit tests
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
  • [ ] Commit unit tests in branch upgrade-tabulator

[!TIP]

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

  • Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
  • Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

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

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Mar 06 '25 17:03 coderabbitai[bot]

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3478/

github-actions[bot] avatar Mar 06 '25 17:03 github-actions[bot]

Not sure if anything from this old PR is useful here. But might be worth to double check https://github.com/Lundalogik/lime-elements/pull/1712

Kiarokh avatar Mar 12 '25 10:03 Kiarokh

Not sure if anything from this old PR is useful here. But might be worth to double check #1712

I checked the old PR and made some updates. All examples seems to work now

jgroth avatar Jun 19 '25 13:06 jgroth

Not sure if anything from this old PR is useful here. But might be worth to double check #1712

I checked the old PR and made some updates. All examples seems to work now

I had a quick look. It seems the only thing that is different is our customization for the sorting icon in column headers which is gone now. But maybe we can live with that (if the directions are as we intended them to be, as described in here: https://github.com/Lundalogik/crm-feature/issues/4413) I need to check

Kiarokh avatar Jun 24 '25 14:06 Kiarokh

Not sure if anything from this old PR is useful here. But might be worth to double check #1712

I checked the old PR and made some updates. All examples seems to work now

I had a quick look. It seems the only thing that is different is our customization for the sorting icon in column headers which is gone now. But maybe we can live with that (if the directions are as we intended them to be, as described in here: Lundalogik/crm-feature#4413) I need to check

The table header also seems to be at the bottom of the table rather than at the top when used in the webclient as well, but maybe that's an issue that should be fixed somewhere else

jgroth avatar Jun 25 '25 07:06 jgroth