@ -8,10 +8,25 @@
< / nav > < / nav >
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 1 : Basic Usage SECTION 0 : Layout
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[0].id" class = "demo-section" > < section :id ="sections[0].id" class = "demo-section" >
< h2 class = "section-title" > 1. { { sections [ 0 ] . label } } < / h2 > < h2 class = "section-title" > 0. { { sections [ 0 ] . label } } < / h2 >
< p class = "section-desc" > Empty Table ( Default min - height : 300 px ) < / p >
< ListTableV2 :data ="[]" :columns ="emptyTableColumns" border / >
< p class = "section-desc" > Empty Table ( flex ) < / p >
< div style = "display: flex; flex-direction: column; height: 200px; padding: 20px; border: solid 1px pink" >
< ListTableV2 :data ="[]" :columns ="emptyTableColumns" border / >
< / div >
< / section >
<!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 1 : Basic Usage
=== === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[1].id" class = "demo-section" >
< h2 class = "section-title" > 1. { { sections [ 1 ] . label } } < / h2 >
< p class = "section-desc" > Basic data binding with columns , pagination , and event handling . < / p > < p class = "section-desc" > Basic data binding with columns , pagination , and event handling . < / p >
< div class = "demo-toolbar" > < div class = "demo-toolbar" >
@ -61,8 +76,8 @@ const basicColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 2 : Styling - Borders & Alignment SECTION 2 : Styling - Borders & Alignment
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[1 ].id" class = "demo-section" > < section :id ="sections[2 ].id" class = "demo-section" >
< h2 class = "section-title" > 2. { { sections [ 1 ] . label } } < / h2 > < h2 class = "section-title" > 2. { { sections [ 2 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Table borders and column content alignment via < code > border < / code > and < code > align < / code > props . Table borders and column content alignment via < code > border < / code > and < code > align < / code > props .
< / p > < / p >
@ -100,8 +115,8 @@ const styleColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 3 : Fixed Columns SECTION 3 : Fixed Columns
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[2 ].id" class = "demo-section" > < section :id ="sections[3 ].id" class = "demo-section" >
< h2 class = "section-title" > 3. { { sections [ 2 ] . label } } < / h2 > < h2 class = "section-title" > 3. { { sections [ 3 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Fix columns to left or right using < code > fixed : "left" < / code > or < code > fixed : "right" < / code > . Fix columns to left or right using < code > fixed : "left" < / code > or < code > fixed : "right" < / code > .
< / p > < / p >
@ -141,8 +156,8 @@ const styleColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 4 : Data Formatting SECTION 4 : Data Formatting
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[3 ].id" class = "demo-section" > < section :id ="sections[4 ].id" class = "demo-section" >
< h2 class = "section-title" > 4. { { sections [ 3 ] . label } } < / h2 > < h2 class = "section-title" > 4. { { sections [ 4 ] . label } } < / h2 >
< p class = "section-desc" > Built - in formatting for timestamps , dictionaries , and file sizes . < / p > < p class = "section-desc" > Built - in formatting for timestamps , dictionaries , and file sizes . < / p >
< ListTableV2 < ListTableV2
@ -172,8 +187,8 @@ const styleColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 5 : Custom Cell Renderer SECTION 5 : Custom Cell Renderer
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[4 ].id" class = "demo-section" > < section :id ="sections[5 ].id" class = "demo-section" >
< h2 class = "section-title" > 5. { { sections [ 4 ] . label } } < / h2 > < h2 class = "section-title" > 5. { { sections [ 5 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Custom cell content via < code > cellRenderer < / code > function . Returns JSX . Critical : must work correctly with the Custom cell content via < code > cellRenderer < / code > function . Returns JSX . Critical : must work correctly with the
mini - table probe row for dynamic height measurement . mini - table probe row for dynamic height measurement .
@ -222,8 +237,8 @@ const rendererColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 6 : Custom Header Renderer SECTION 6 : Custom Header Renderer
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[5 ].id" class = "demo-section" > < section :id ="sections[6 ].id" class = "demo-section" >
< h2 class = "section-title" > 6. { { sections [ 5 ] . label } } < / h2 > < h2 class = "section-title" > 6. { { sections [ 6 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Custom header content via < code > headerCellRenderer < / code > function . Must also sync with mini - table header probe . Custom header content via < code > headerCellRenderer < / code > function . Must also sync with mini - table header probe .
< / p > < / p >
@ -271,8 +286,8 @@ const headerColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 7 : Dynamic Height ( Auto Probe ) SECTION 7 : Dynamic Height ( Auto Probe )
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[6 ].id" class = "demo-section" > < section :id ="sections[7 ].id" class = "demo-section" >
< h2 class = "section-title" > 7. { { sections [ 6 ] . label } } < / h2 > < h2 class = "section-title" > 7. { { sections [ 7 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Dynamic height mode uses a hidden mini - table to probe actual row and header heights . Dynamic height mode uses a hidden mini - table to probe actual row and header heights .
< code > debug < / code > shows estimated values . No < code > rowHeight < / code > or < code > estimatedRowHeight < / code > needed — < code > debug < / code > shows estimated values . No < code > rowHeight < / code > or < code > estimatedRowHeight < / code > needed —
@ -313,8 +328,8 @@ const headerColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 8 : Fixed Height Mode SECTION 8 : Fixed Height Mode
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[7 ].id" class = "demo-section" > < section :id ="sections[8 ].id" class = "demo-section" >
< h2 class = "section-title" > 8. { { sections [ 7 ] . label } } < / h2 > < h2 class = "section-title" > 8. { { sections [ 8 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Fixed height mode via < code > : row - height = "60" < / code > . Disables the mini - table probe . Better performance for large Fixed height mode via < code > : row - height = "60" < / code > . Disables the mini - table probe . Better performance for large
datasets since no measurement needed . datasets since no measurement needed .
@ -352,8 +367,8 @@ const headerColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 9 : Column Width Distribution SECTION 9 : Column Width Distribution
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[8 ].id" class = "demo-section" > < section :id ="sections[9 ].id" class = "demo-section" >
< h2 class = "section-title" > 9. { { sections [ 8 ] . label } } < / h2 > < h2 class = "section-title" > 9. { { sections [ 9 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Control column widths with < code > width < / code > ( fixed ) and < code > minWidth < / code > ( flexible ) . Columns without Control column widths with < code > width < / code > ( fixed ) and < code > minWidth < / code > ( flexible ) . Columns without
explicit width use auto - derived flex factors greater than < code > 1 < / code > to fill remaining space . explicit width use auto - derived flex factors greater than < code > 1 < / code > to fill remaining space .
@ -383,8 +398,8 @@ const headerColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 10 : Width + Height + MaxHeight SECTION 10 : Width + Height + MaxHeight
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[9 ].id" class = "demo-section" > < section :id ="sections[10 ].id" class = "demo-section" >
< h2 class = "section-title" > 10. { { sections [ 9 ] . label } } < / h2 > < h2 class = "section-title" > 10. { { sections [ 10 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Control table dimensions with < code > height < / code > , < code > maxHeight < / code > , and < code > headerHeight < / code > . Control table dimensions with < code > height < / code > , < code > maxHeight < / code > , and < code > headerHeight < / code > .
Auto - resizer handles width automatically . Auto - resizer handles width automatically .
@ -422,8 +437,8 @@ const headerColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 11 : Slot - based Custom Cells SECTION 11 : Slot - based Custom Cells
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[10 ].id" class = "demo-section" > < section :id ="sections[11 ].id" class = "demo-section" >
< h2 class = "section-title" > 11. { { sections [ 10 ] . label } } < / h2 > < h2 class = "section-title" > 11. { { sections [ 11 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Custom cell content via Vue template slots . Use < code > slot : true < / code > on column and define Custom cell content via Vue template slots . Use < code > slot : true < / code > on column and define
< code > # columnKey < / code > template in parent . < code > # columnKey < / code > template in parent .
@ -450,7 +465,7 @@ const headerColumns = [
< / e l - t a g > < / e l - t a g >
< / template > < / template >
< template # actions = "{ row }" > < template # actions = "{ row }" >
< div style = "display: flex; flex: 1; justify-content: center; width: 100%; overflow: hidden; padding: 10% 20% " > < div style = "display: flex; flex: 1; justify-content: center; width: 100%; overflow: hidden; padding: 10px " >
< el -button link type = "primary" size = "small" @click ="onSlotAction(row)" > Edit < / el -button > < el -button link type = "primary" size = "small" @click ="onSlotAction(row)" > Edit < / el -button >
< el -button link type = "danger" size = "small" @click ="onSlotAction(row)" > Delete < / el -button > < el -button link type = "danger" size = "small" @click ="onSlotAction(row)" > Delete < / el -button >
< / div > < / div >
@ -481,8 +496,8 @@ const slotColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 12 : i18n Support SECTION 12 : i18n Support
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[11 ].id" class = "demo-section" > < section :id ="sections[12 ].id" class = "demo-section" >
< h2 class = "section-title" > 12. { { sections [ 11 ] . label } } < / h2 > < h2 class = "section-title" > 12. { { sections [ 12 ] . label } } < / h2 >
< p class = "section-desc" > Column headers support i18n via < code > i18n < / code > key ( uses < code > vue3 - i18n < / code > ) . < / p > < p class = "section-desc" > Column headers support i18n via < code > i18n < / code > key ( uses < code > vue3 - i18n < / code > ) . < / p >
< ListTableV2 < ListTableV2
@ -509,8 +524,8 @@ const i18nColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 13 : Combined Features Test SECTION 13 : Combined Features Test
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[12 ].id" class = "demo-section" > < section :id ="sections[13 ].id" class = "demo-section" >
< h2 class = "section-title" > 13. { { sections [ 12 ] . label } } < / h2 > < h2 class = "section-title" > 13. { { sections [ 13 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
All features working together : fixed columns + custom renderers + pagination + dynamic height probe + events . All features working together : fixed columns + custom renderers + pagination + dynamic height probe + events .
This is the stress test . This is the stress test .
@ -563,8 +578,8 @@ const combinedColumns = [
<!-- === === === === === === === === === === === === === === === === === === === === <!-- === === === === === === === === === === === === === === === === === === === ===
SECTION 14 : Custom Renderer + Fixed + Pagination SECTION 14 : Custom Renderer + Fixed + Pagination
=== === === === === === === === === === === === === === === === === === === === -- > === === === === === === === === === === === === === === === === === === === === -- >
< section :id ="sections[13 ].id" class = "demo-section" > < section :id ="sections[14 ].id" class = "demo-section" >
< h2 class = "section-title" > 14. { { sections [ 13 ] . label } } < / h2 > < h2 class = "section-title" > 14. { { sections [ 14 ] . label } } < / h2 >
< p class = "section-desc" > < p class = "section-desc" >
Edge case : custom < code > cellRenderer < / code > combined with < code > fixed < / code > columns and Edge case : custom < code > cellRenderer < / code > combined with < code > fixed < / code > columns and
< code > pagination < / code > . Verifies mini - table probe handles custom renderers correctly across page changes . < code > pagination < / code > . Verifies mini - table probe handles custom renderers correctly across page changes .
@ -605,7 +620,7 @@ const edgeColumns = [
< script lang = "tsx" setup > < script lang = "tsx" setup >
import { useStore } from "vuex" ; import { useStore } from "vuex" ;
import { reactive , ref , computed , onMounted } from "vue" ; import { reactive , ref , computed , onMounted } from "vue" ;
import { ListTableV2 , SearchRow , NoobInput , NoobSelect , Infomation } from "noob-mengyxu" ; import { ListTableV2 , SearchRow , NoobInput , NoobSelect , Infomation , useSysDict } from "noob-mengyxu" ;
import { useI18n } from "vue3-i18n" ; import { useI18n } from "vue3-i18n" ;
import { LoremIpsum } from "lorem-ipsum" ; import { LoremIpsum } from "lorem-ipsum" ;
import { ElTag , ElButton , ElLink } from "element-plus" ; import { ElTag , ElButton , ElLink } from "element-plus" ;
@ -617,6 +632,8 @@ import {
} from "element-plus/es/components/table-v2/src/types.mjs" ; } from "element-plus/es/components/table-v2/src/types.mjs" ;
import { type ListTableColumn } from "../../../packages/base/data/list-table-v2" ; import { type ListTableColumn } from "../../../packages/base/data/list-table-v2" ;
const { updateDict } = useSysDict ( ) ;
/ / - - - D a t a G e n e r a t o r - - - / / - - - D a t a G e n e r a t o r - - -
const generateRows = ( count : number ) => { const generateRows = ( count : number ) => {
const rows : Array < Record < string , any > > = [ ] ; const rows : Array < Record < string , any > > = [ ] ;
@ -648,6 +665,7 @@ const { t } = useI18n();
/ / - - - S e c t i o n N a v i g a t i o n - - - / / - - - S e c t i o n N a v i g a t i o n - - -
const sections = [ const sections = [
{ id : "s0-empty" , label : "Layout" } ,
{ id : "s1-basic" , label : "Basic Usage" } , { id : "s1-basic" , label : "Basic Usage" } ,
{ id : "s2-styling" , label : "Styling" } , { id : "s2-styling" , label : "Styling" } ,
{ id : "s3-fixed" , label : "Fixed Columns" } , { id : "s3-fixed" , label : "Fixed Columns" } ,
@ -677,6 +695,17 @@ const testResults = reactive<Record<string, any>>({
combined : { } , combined : { } ,
} ) ; } ) ;
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
/ / S E C T I O N 0 : E m p t y T a b l e
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
const emptyTableColumns = [
{ key : "id" , name : "ID" } ,
{ key : "caseName" , name : "Case Name" } ,
{ key : "taskName" , name : "Task Name" } ,
{ key : "userId" , name : "User ID" , dict : "test" } ,
{ key : "createTime" , name : "Create Time" , timestamp : "unix" } ,
] ;
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
/ / S E C T I O N 1 : B a s i c / / S E C T I O N 1 : B a s i c
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = / / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
@ -686,7 +715,7 @@ const basicColumns = [
{ key : "id" , name : "ID" } , { key : "id" , name : "ID" } ,
{ key : "caseName" , name : "Case Name" } , { key : "caseName" , name : "Case Name" } ,
{ key : "taskName" , name : "Task Name" } , { key : "taskName" , name : "Task Name" } ,
{ key : "userId" , name : "User ID" } , { key : "userId" , name : "User ID" , dict : "test" } ,
{ key : "createTime" , name : "Create Time" , timestamp : "unix" } , { key : "createTime" , name : "Create Time" , timestamp : "unix" } ,
] ; ] ;
const handleBasicQuery = ( ) => { const handleBasicQuery = ( ) => {
@ -1025,6 +1054,9 @@ const toggleRendererType = () => {
onMounted ( ( ) => { onMounted ( ( ) => {
console . log ( "Table V2 Demo mounted" ) ; console . log ( "Table V2 Demo mounted" ) ;
updateDict ( [ "test" ] , {
test : ( ) => Object . fromEntries ( Array . from ( { length : 10 } , ( _ , i ) => [ ` user ${ i } ` , ` 用户 ${ i } ` ] ) ) ,
} ) ;
} ) ; } ) ;
< / script > < / script >
