feat: new component data table#1967
Merged
Merged
Conversation
- Implemented a new DataTable component with built-in column configuration and pagination. - Added styles for the DataTable in dataTable.less. - Created documentation in both English and Chinese for usage examples and API details. - Introduced props for row and cell customization, including rendering options. - Added support for local and remote pagination modes. - Implemented loading and empty states for better user experience. - Created example usage in Vue with various configurations. - Added locale support for English and Chinese languages. - Defined TypeScript types for props and context to enhance type safety.
- Implemented a selection column in the DataTable component allowing users to select multiple rows. - Added `checkedRowKeys` prop to manage selected rows. - Updated rendering logic to include checkboxes for selection. - Enhanced tests to cover selection functionality. - Modified documentation to include examples for selection usage.
feat(select): include scrollbar class in select menu feat(styles): add scrollbar styles to common.less feat(table): apply scrollbar class to table main div feat(dataTable): enhance DataTable types with fixed column and cell span support
…custom children key - Implemented tree data rendering in DataTable component. - Added props for tree configuration: `tree`, `cascade`, and `childrenKey`. - Enhanced selection logic to support cascading selection for tree nodes. - Updated styles for tree cells and triggers. - Added tests for tree data functionality and selection behavior. - Updated documentation to include examples for tree data and single selection.
… features - Introduced `surface="low"` for a subtle background style in the data table. - Enhanced selection column to support non-cascading tree selection and single selection mode. - Updated rendering of expanded content for better visual structure. - Improved pagination handling with local and remote data management. - Added new localization keys for surface background and tree selection features. - Refactored props and types for better clarity and consistency. - Updated styles to accommodate new surface background and text color variables.
…ogic - Removed unnecessary CSS variables and simplified footer styles in dataTable.less. - Replaced Array.from with a utility function `times` for generating data arrays in documentation and examples. - Updated DataTable props to remove the tree option interface and simplify type definitions. - Introduced new useBodyRows and usePagination composables for better data management and pagination handling. - Enhanced type definitions for better clarity and consistency across the data table components.
…column and update related logic
…ingle selection mode and tree structure
…lated styles and documentation
…djust resize trigger dimensions
…eader and body cell components for improved structure and maintainability
…tion, and examples
- Implemented single column sorting with controlled state using v-model:sorters. - Added support for multiple column sorting by setting sort-mode to "multiple". - Enhanced documentation for sorting features in zh-CN and en-US. - Updated example files to demonstrate sorting capabilities. - Introduced new props for sorters and sort mode in DataTable component. - Created useSorter composable for managing sorting logic. - Added new style variables for sorting triggers and surface low background.
… documentation and examples
…s for improved header management
…hance expand functionality
…mproved theme customization
- Updated column titles and data rendering to support localization in both English and Chinese. - Refactored data and column definitions to use computed properties for dynamic translations. - Improved the rendering of status and other fields to reflect localized values. - Added new translations for various terms related to data table functionality. - Adjusted pagination options to disable size changer by default. - Enhanced empty state display with custom content.
…pans, update documentation
…ling for busy rows
…and update documentation
… for pagination component
…ance type definitions
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@varlet/cli
@varlet/icons
@varlet/import-resolver
@varlet/preset-tailwindcss
@varlet/preset-unocss
@varlet/shared
@varlet/touch-emulator
@varlet/ui
@varlet/use
@varlet/vite-plugins
commit: |
…urface background
Deploying varlet with
|
| Latest commit: |
2104e73
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://50709218.varlet.pages.dev |
| Branch Preview URL: | https://feat-data-table.varlet.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR introduces a new DataTable component to @varlet/ui, along with supporting theme variables, documentation, examples, and shared scrollbar styling updates that are reused across existing scrollable surfaces (Table/Select/Menu, etc.).
Changes:
- Added a new
DataTablecomponent (props, internal composables, styles, docs, examples, theme vars, and typings). - Enhanced the existing
Tablecomponent withplain+surface="low"variants and corresponding theme/style-var support. - Introduced a reusable
var--scrollbarutility style and applied it to multiple scrollable UI surfaces; updated related snapshots/theme outputs.
Reviewed changes
Copilot reviewed 63 out of 68 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/varlet-ui/varlet.config.mjs | Adds data-table docs route and reorders pagination entry. |
| packages/varlet-ui/types/table.d.ts | Extends TableProps with surface/plain. |
| packages/varlet-ui/types/styleVars.d.ts | Adds style var typings for data-table and new table variants. |
| packages/varlet-ui/types/index.d.ts | Exports dataTable types and augments Vue global component typing. |
| packages/varlet-ui/types/dataTable.d.ts | Adds public TypeScript declarations for DataTable. |
| packages/varlet-ui/src/themes/md3-light/table.ts | Updates table theme vars for new surface/plain variants. |
| packages/varlet-ui/src/themes/md3-light/pagination.ts | Aligns pagination item background with MD3 surface var. |
| packages/varlet-ui/src/themes/md3-light/index.ts | Registers md3-light dataTable theme vars. |
| packages/varlet-ui/src/themes/md3-light/dataTable.ts | Adds md3-light theme vars for DataTable. |
| packages/varlet-ui/src/themes/md3-dark/table.ts | Updates table theme vars for new surface/plain variants. |
| packages/varlet-ui/src/themes/md3-dark/index.ts | Registers md3-dark dataTable theme vars. |
| packages/varlet-ui/src/themes/md3-dark/dataTable.ts | Adds md3-dark theme vars for DataTable. |
| packages/varlet-ui/src/themes/dark/table.ts | Updates dark table theme vars for new surface/plain variants. |
| packages/varlet-ui/src/themes/dark/index.ts | Registers dark dataTable theme vars. |
| packages/varlet-ui/src/themes/dark/dataTable.ts | Adds dark theme vars for DataTable. |
| packages/varlet-ui/src/themes/tests/snapshots/index.spec.js.snap | Updates theme snapshot output for new vars/changes. |
| packages/varlet-ui/src/table/Table.vue | Adds plain + surface="low" rendering variants and scrollbar utility class. |
| packages/varlet-ui/src/table/table.less | Adds CSS vars and styles for table surface/plain variants + scrollbar track var. |
| packages/varlet-ui/src/table/props.ts | Adds surface and plain props to Table. |
| packages/varlet-ui/src/table/example/locale/zh-CN.ts | Adds new example i18n keys for table variants (zh-CN). |
| packages/varlet-ui/src/table/example/locale/en-US.ts | Adds new example i18n keys for table variants (en-US). |
| packages/varlet-ui/src/table/example/index.vue | Adds examples for plain and surface="low" table modes. |
| packages/varlet-ui/src/table/docs/zh-CN.md | Documents plain and surface props + new CSS vars (zh-CN). |
| packages/varlet-ui/src/table/docs/en-US.md | Documents plain and surface props + new CSS vars (en-US). |
| packages/varlet-ui/src/table/tests/index.spec.js | Adds tests for new table props and slot/footer rendering behavior. |
| packages/varlet-ui/src/styles/common.less | Introduces reusable .var--scrollbar styling utility. |
| packages/varlet-ui/src/select/Select.vue | Applies scrollbar utility class to select menu scroller. |
| packages/varlet-ui/src/select/select.less | Sets scrollbar track background var for select scroller. |
| packages/varlet-ui/src/pagination/props.ts | Minor formatting cleanup. |
| packages/varlet-ui/src/pagination/pagination.less | Fixes right margin for last “next” item. |
| packages/varlet-ui/src/pagination/docs/en-US.md | Fixes markdown table row formatting. |
| packages/varlet-ui/src/menu/Menu.vue | Applies scrollbar utility class to menu popup container. |
| packages/varlet-ui/src/menu/menu.less | Sets scrollbar track background var for menu. |
| packages/varlet-ui/src/menu/tests/snapshots/index.spec.js.snap | Updates menu snapshots due to added scrollbar class. |
| packages/varlet-ui/src/menu-select/MenuSelect.vue | Applies scrollbar utility class to menu-select options container. |
| packages/varlet-ui/src/menu-select/menuSelect.less | Sets scrollbar track background var for menu-select. |
| packages/varlet-ui/src/menu-select/tests/snapshots/index.spec.js.snap | Updates menu-select snapshots due to added scrollbar class. |
| packages/varlet-ui/src/locale/zh-TW.ts | Adds dataTableEmptyText locale string. |
| packages/varlet-ui/src/locale/zh-CN.ts | Adds dataTableEmptyText locale string. |
| packages/varlet-ui/src/locale/ja-JP.ts | Adds dataTableEmptyText locale string. |
| packages/varlet-ui/src/locale/index.ts | Extends Message type with dataTableEmptyText. |
| packages/varlet-ui/src/locale/fa-IR.ts | Adds dataTableEmptyText locale string. |
| packages/varlet-ui/src/locale/en-US.ts | Adds dataTableEmptyText locale string. |
| packages/varlet-ui/src/data-table/useTreeExpand.ts | Adds tree expand/collapse state management for DataTable. |
| packages/varlet-ui/src/data-table/useSorter.ts | Adds controlled sorter state handling for DataTable. |
| packages/varlet-ui/src/data-table/useSelectionColumn.ts | Adds selection logic (single/multi, cascade tree selection). |
| packages/varlet-ui/src/data-table/usePagination.ts | Adds local/remote pagination integration for DataTable. |
| packages/varlet-ui/src/data-table/useHeaderRows.ts | Adds header row generation (group headers + spans). |
| packages/varlet-ui/src/data-table/useFootRows.ts | Adds summary/footer row generation with spans. |
| packages/varlet-ui/src/data-table/useExpandRow.ts | Adds expand-row behavior for expand columns. |
| packages/varlet-ui/src/data-table/useColumnSizes.ts | Adds column width resolving + resize handling. |
| packages/varlet-ui/src/data-table/useColumnsFixedOffsets.ts | Adds sticky fixed-column offset calculation. |
| packages/varlet-ui/src/data-table/useBodyRows.ts | Adds body row/cell model generation incl. tree flattening + spans. |
| packages/varlet-ui/src/data-table/span.ts | Adds generic span matrix + span resolver utilities. |
| packages/varlet-ui/src/data-table/props.ts | Defines DataTable public props/types and defaults. |
| packages/varlet-ui/src/data-table/index.ts | Adds install/default-props wiring for the DataTable component. |
| packages/varlet-ui/src/data-table/example/locale/zh-CN.ts | Adds DataTable example i18n (zh-CN). |
| packages/varlet-ui/src/data-table/example/locale/index.ts | Wires DataTable example locale switching. |
| packages/varlet-ui/src/data-table/example/locale/en-US.ts | Adds DataTable example i18n (en-US). |
| packages/varlet-ui/src/data-table/example/index.vue | Adds DataTable demo page covering main features. |
| packages/varlet-ui/src/data-table/docs/en-US.md | Adds DataTable documentation (en-US). |
| packages/varlet-ui/src/data-table/DataTableHeaderCell.vue | Implements header cell rendering (sorter, selection, resize). |
| packages/varlet-ui/src/data-table/DataTableBodyCell.vue | Implements body cell rendering (selection, expand, tree). |
| packages/varlet-ui/src/data-table/DataTable.vue | Implements main DataTable composition + rendering + pagination footer. |
| packages/varlet-ui/src/data-table/dataTable.less | Adds DataTable CSS vars and component styles. |
| packages/varlet-cli/site/mobile/App.vue | Removes global webkit scrollbar hiding on the mobile site. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…le column and improve row selection logic
…prove selection logic
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Checklist
List of tasks you have already done and plan to do.
Change information
Describe your modifications here.
Issues
The issues you want to close, formatted as close #1.
Related Links
Links related to this pr.