diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index 15c30cdea4..c535daa4c9 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -11853,7 +11853,7 @@ exports[`renders components/table/demo/filter-search.tsx extend context correctl exports[`renders components/table/demo/fixed-columns.tsx extend context correctly 1`] = `
+ + + + + + + + + + + + @@ -12035,6 +12047,78 @@ exports[`renders components/table/demo/fixed-columns.tsx extend context correctl > Column 8 + + + + + + + + + + + + + + + + + + + + + + + - John Brown + Olivia + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Column 9 + + Column 10 + + Column 11 + + Column 12 + + Column 13 + + Column 14 + + Column 15 + + Column 16 + + Column 17 + + Column 18 + + Column 19 + + Column 20 + + +
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+
New York Park + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + - Jim Green + Ethan London Park + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + -
    -
  • - -
    • -
  • - - 1 - -
    • -
  • - -
    • -
@@ -12364,7 +12585,7 @@ exports[`renders components/table/demo/fixed-columns.tsx extend context correctl exports[`renders components/table/demo/fixed-columns-header.tsx extend context correctly 1`] = `
Column 8 +
+ Column 9 + + Column 10 + + Column 11 + + Column 12 + + Column 13 + + Column 14 + + Column 15 + + Column 16 + + Column 17 + + Column 18 + + Column 19 + + Column 20 +
+ + + + + + + + + + + + @@ -12599,6 +12904,102 @@ exports[`renders components/table/demo/fixed-columns-header.tsx extend context c > + + + + + + + + + + + + - Edward 0 + Edward King 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+
- London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 - Edward 1 + Edward King 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 - Edward 2 + Edward King 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 - Edward 3 + Edward King 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 - Edward 4 + Edward King 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 - Edward 5 + Edward King 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 - Edward 6 + Edward King 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 - Edward 7 + Edward King 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 - Edward 8 + Edward King 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 - Edward 9 + Edward King 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9
+ + + + + + + + + + + + @@ -13713,6 +14726,78 @@ exports[`renders components/table/demo/fixed-gapped-columns.tsx extend context c > Column 8 + + + + + + + + + + + + + + + + + + + + + + + - John Brown + Olivia + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Column 9 + + Column 10 + + Column 11 + + Column 12 + + Column 13 + + Column 14 + + Column 15 + + Column 16 + + Column 17 + + Column 18 + + Column 19 + + Column 20 + + +
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+
New York Park + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + + action + + + + action + + + + action + +
+ Ethan + + 40 + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park +
+ + + + + + + + + + + + @@ -9653,6 +9665,78 @@ exports[`renders components/table/demo/fixed-columns.tsx correctly 1`] = ` > Column 8 + + + + + + + + + + + + + + + + + + + + + + + - John Brown + Olivia + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Column 9 + + Column 10 + + Column 11 + + Column 12 + + Column 13 + + Column 14 + + Column 15 + + Column 16 + + Column 17 + + Column 18 + + Column 19 + + Column 20 + + +
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+
New York Park + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + - Jim Green + Ethan London Park + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + -
    -
  • - -
    • -
  • - - 1 - -
    • -
  • - -
    • -
@@ -9980,7 +10201,7 @@ exports[`renders components/table/demo/fixed-columns.tsx correctly 1`] = ` exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] = `
Column 8 +
+ Column 9 + + Column 10 + + Column 11 + + Column 12 + + Column 13 + + Column 14 + + Column 15 + + Column 16 + + Column 17 + + Column 18 + + Column 19 + + Column 20 +
+ + + + + + + + + + + + @@ -10215,6 +10520,102 @@ exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] = > + + + + + + + + + + + + - Edward 0 + Edward King 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+
- London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 - London Park no. 0 + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 + + London, Park Lane no. 0 - Edward 1 + Edward King 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 - London Park no. 1 + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 + + London, Park Lane no. 1 - Edward 2 + Edward King 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 - London Park no. 2 + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 + + London, Park Lane no. 2 - Edward 3 + Edward King 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 - London Park no. 3 + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 + + London, Park Lane no. 3 - Edward 4 + Edward King 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 - London Park no. 4 + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 + + London, Park Lane no. 4 - Edward 5 + Edward King 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 - London Park no. 5 + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 + + London, Park Lane no. 5 - Edward 6 + Edward King 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 - London Park no. 6 + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 + + London, Park Lane no. 6 - Edward 7 + Edward King 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 - London Park no. 7 + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 + + London, Park Lane no. 7 - Edward 8 + Edward King 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 - London Park no. 8 + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 + + London, Park Lane no. 8 - Edward 9 + Edward King 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 - London Park no. 9 + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9 + + London, Park Lane no. 9
+ + + + + + + + + + + + @@ -11224,6 +12237,78 @@ exports[`renders components/table/demo/fixed-gapped-columns.tsx correctly 1`] = > Column 8 + + + + + + + + + + + + + + + + + + + + + + + - John Brown + Olivia + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Column 9 + + Column 10 + + Column 11 + + Column 12 + + Column 13 + + Column 14 + + Column 15 + + Column 16 + + Column 17 + + Column 18 + + Column 19 + + Column 20 + + +
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+ 		+
+
+
New York Park + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + + action + + + + action + + + + action + +
+ Ethan + + 40 + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + + London Park + ['onChange'] = (pagination, filters, sorter, console.log('params', pagination, filters, sorter, extra); }; -const App: React.FC = () => ; +const App: React.FC = () => ( + columns={columns} dataSource={data} onChange={onChange} /> +); export default App; diff --git a/components/table/demo/filter-search.tsx b/components/table/demo/filter-search.tsx index f7bab970d2..8e219d0396 100644 --- a/components/table/demo/filter-search.tsx +++ b/components/table/demo/filter-search.tsx @@ -87,6 +87,8 @@ const onChange: TableProps['onChange'] = (pagination, filters, sorter, console.log('params', pagination, filters, sorter, extra); }; -const App: React.FC = () =>
; +const App: React.FC = () => ( + columns={columns} dataSource={data} onChange={onChange} /> +); export default App; diff --git a/components/table/demo/fixed-columns-header.tsx b/components/table/demo/fixed-columns-header.tsx index b1843b37f6..bb14c1dcb9 100644 --- a/components/table/demo/fixed-columns-header.tsx +++ b/components/table/demo/fixed-columns-header.tsx @@ -1,6 +1,24 @@ import React from 'react'; import { Table } from 'antd'; import type { TableColumnsType } from 'antd'; +import { createStyles } from 'antd-style'; + +const useStyle = createStyles(({ css, token }) => { + const { antCls } = token; + return { + customTable: css` + ${antCls}-table { + ${antCls}-table-container { + ${antCls}-table-body, + ${antCls}-table-content { + scrollbar-width: thin; + scrollbar-color: unset; + } + } + } + `, + }; +}); interface DataType { key: React.Key; @@ -67,6 +85,18 @@ const columns: TableColumnsType = [ width: 150, }, { title: 'Column 8', dataIndex: 'address', key: '8' }, + { title: 'Column 9', dataIndex: 'address', key: '9' }, + { title: 'Column 10', dataIndex: 'address', key: '10' }, + { title: 'Column 11', dataIndex: 'address', key: '11' }, + { title: 'Column 12', dataIndex: 'address', key: '12' }, + { title: 'Column 13', dataIndex: 'address', key: '13' }, + { title: 'Column 14', dataIndex: 'address', key: '14' }, + { title: 'Column 15', dataIndex: 'address', key: '15' }, + { title: 'Column 16', dataIndex: 'address', key: '16' }, + { title: 'Column 17', dataIndex: 'address', key: '17' }, + { title: 'Column 18', dataIndex: 'address', key: '18' }, + { title: 'Column 19', dataIndex: 'address', key: '19' }, + { title: 'Column 20', dataIndex: 'address', key: '20' }, { title: 'Action', key: 'operation', @@ -76,18 +106,23 @@ const columns: TableColumnsType = [ }, ]; -const data: DataType[] = []; -for (let i = 0; i < 100; i++) { - data.push({ - key: i, - name: `Edward ${i}`, - age: 32, - address: `London Park no. ${i}`, - }); -} +const dataSource = Array.from({ length: 100 }).map((_, i) => ({ + key: i, + name: `Edward King ${i}`, + age: 32, + address: `London, Park Lane no. ${i}`, +})); -const App: React.FC = () => ( -
-); +const App: React.FC = () => { + const { styles } = useStyle(); + return ( + + className={styles.customTable} + columns={columns} + dataSource={dataSource} + scroll={{ x: 'max-content', y: 55 * 5 }} + /> + ); +}; export default App; diff --git a/components/table/demo/fixed-columns.tsx b/components/table/demo/fixed-columns.tsx index 41fef9334a..6f34f9192b 100644 --- a/components/table/demo/fixed-columns.tsx +++ b/components/table/demo/fixed-columns.tsx @@ -1,6 +1,24 @@ import React from 'react'; import { Table } from 'antd'; import type { TableColumnsType } from 'antd'; +import { createStyles } from 'antd-style'; + +const useStyle = createStyles(({ css, token }) => { + const { antCls } = token; + return { + customTable: css` + ${antCls}-table { + ${antCls}-table-container { + ${antCls}-table-body, + ${antCls}-table-content { + scrollbar-width: thin; + scrollbar-color: unset; + } + } + } + `, + }; +}); interface DataType { key: React.Key; @@ -33,6 +51,18 @@ const columns: TableColumnsType = [ { title: 'Column 6', dataIndex: 'address', key: '6' }, { title: 'Column 7', dataIndex: 'address', key: '7' }, { title: 'Column 8', dataIndex: 'address', key: '8' }, + { title: 'Column 9', dataIndex: 'address', key: '9' }, + { title: 'Column 10', dataIndex: 'address', key: '10' }, + { title: 'Column 11', dataIndex: 'address', key: '11' }, + { title: 'Column 12', dataIndex: 'address', key: '12' }, + { title: 'Column 13', dataIndex: 'address', key: '13' }, + { title: 'Column 14', dataIndex: 'address', key: '14' }, + { title: 'Column 15', dataIndex: 'address', key: '15' }, + { title: 'Column 16', dataIndex: 'address', key: '16' }, + { title: 'Column 17', dataIndex: 'address', key: '17' }, + { title: 'Column 18', dataIndex: 'address', key: '18' }, + { title: 'Column 19', dataIndex: 'address', key: '19' }, + { title: 'Column 20', dataIndex: 'address', key: '20' }, { title: 'Action', key: 'operation', @@ -42,21 +72,22 @@ const columns: TableColumnsType = [ }, ]; -const data: DataType[] = [ - { - key: '1', - name: 'John Brown', - age: 32, - address: 'New York Park', - }, - { - key: '2', - name: 'Jim Green', - age: 40, - address: 'London Park', - }, +const dataSource: DataType[] = [ + { key: '1', name: 'Olivia', age: 32, address: 'New York Park' }, + { key: '2', name: 'Ethan', age: 40, address: 'London Park' }, ]; -const App: React.FC = () =>
; +const App: React.FC = () => { + const { styles } = useStyle(); + return ( + + className={styles.customTable} + pagination={false} + columns={columns} + dataSource={dataSource} + scroll={{ x: 'max-content' }} + /> + ); +}; export default App; diff --git a/components/table/demo/fixed-gapped-columns.tsx b/components/table/demo/fixed-gapped-columns.tsx index 6c169b43fb..6a0dcf51e0 100644 --- a/components/table/demo/fixed-gapped-columns.tsx +++ b/components/table/demo/fixed-gapped-columns.tsx @@ -1,6 +1,24 @@ import React from 'react'; import { Table } from 'antd'; import type { TableColumnsType } from 'antd'; +import { createStyles } from 'antd-style'; + +const useStyle = createStyles(({ css, token }) => { + const { antCls } = token; + return { + customTable: css` + ${antCls}-table { + ${antCls}-table-container { + ${antCls}-table-body, + ${antCls}-table-content { + scrollbar-width: thin; + scrollbar-color: unset; + } + } + } + `, + }; +}); interface DataType { key: React.Key; @@ -21,14 +39,26 @@ const columns: TableColumnsType = [ width: 100, dataIndex: 'age', }, - { title: 'Column 1', dataIndex: 'address', fixed: 'left' }, - { title: 'Column 2', dataIndex: 'address' }, - { title: 'Column 3', dataIndex: 'address' }, - { title: 'Column 4', dataIndex: 'address' }, - { title: 'Column 5', dataIndex: 'address' }, - { title: 'Column 6', dataIndex: 'address' }, - { title: 'Column 7', dataIndex: 'address' }, - { title: 'Column 8', dataIndex: 'address' }, + { title: 'Column 1', dataIndex: 'address', key: '1', fixed: 'left' }, + { title: 'Column 2', dataIndex: 'address', key: '2' }, + { title: 'Column 3', dataIndex: 'address', key: '3' }, + { title: 'Column 4', dataIndex: 'address', key: '4' }, + { title: 'Column 5', dataIndex: 'address', key: '5' }, + { title: 'Column 6', dataIndex: 'address', key: '6' }, + { title: 'Column 7', dataIndex: 'address', key: '7' }, + { title: 'Column 8', dataIndex: 'address', key: '8' }, + { title: 'Column 9', dataIndex: 'address', key: '9' }, + { title: 'Column 10', dataIndex: 'address', key: '10' }, + { title: 'Column 11', dataIndex: 'address', key: '11' }, + { title: 'Column 12', dataIndex: 'address', key: '12' }, + { title: 'Column 13', dataIndex: 'address', key: '13' }, + { title: 'Column 14', dataIndex: 'address', key: '14' }, + { title: 'Column 15', dataIndex: 'address', key: '15' }, + { title: 'Column 16', dataIndex: 'address', key: '16' }, + { title: 'Column 17', dataIndex: 'address', key: '17' }, + { title: 'Column 18', dataIndex: 'address', key: '18' }, + { title: 'Column 19', dataIndex: 'address', key: '19' }, + { title: 'Column 20', dataIndex: 'address', key: '20' }, { title: 'Action 1', fixed: 'right', @@ -48,17 +78,23 @@ const columns: TableColumnsType = [ }, ]; -const data: DataType[] = [ - { - key: '1', - name: 'John Brown', - age: 32, - address: 'New York Park', - }, +const dataSource: DataType[] = [ + { key: '1', name: 'Olivia', age: 32, address: 'New York Park' }, + { key: '2', name: 'Ethan', age: 40, address: 'London Park' }, ]; -const App: React.FC = () => ( -
-); +const App: React.FC = () => { + const { styles } = useStyle(); + return ( + + bordered + className={styles.customTable} + columns={columns} + dataSource={dataSource} + scroll={{ x: 'max-content' }} + pagination={false} + /> + ); +}; export default App; diff --git a/components/table/demo/resizable-column.tsx b/components/table/demo/resizable-column.tsx index 1064d3f4fb..e001403e8a 100644 --- a/components/table/demo/resizable-column.tsx +++ b/components/table/demo/resizable-column.tsx @@ -12,12 +12,12 @@ interface DataType { note: string; } -const ResizableTitle = ( - props: React.HTMLAttributes & { - onResize: (e: React.SyntheticEvent, data: ResizeCallbackData) => void; - width: number; - }, -) => { +interface TitlePropsType { + width: number; + onResize: (e: React.SyntheticEvent, data: ResizeCallbackData) => void; +} + +const ResizableTitle: React.FC & TitlePropsType>> = (props) => { const { onResize, width, ...restProps } = props; if (!width) { @@ -28,14 +28,7 @@ const ResizableTitle = ( { - e.stopPropagation(); - }} - /> - } + handle={ e.stopPropagation()} />} onResize={onResize} draggableOpts={{ enableUserSelectHack: false }} > @@ -44,6 +37,30 @@ const ResizableTitle = ( ); }; +const data: DataType[] = [ + { + key: 0, + date: '2018-02-11', + amount: 120, + type: 'income', + note: 'transfer', + }, + { + key: 1, + date: '2018-03-11', + amount: 243, + type: 'income', + note: 'transfer', + }, + { + key: 2, + date: '2018-04-11', + amount: 98, + type: 'income', + note: 'transfer', + }, +]; + const App: React.FC = () => { const [columns, setColumns] = useState>([ { @@ -73,29 +90,6 @@ const App: React.FC = () => { render: () => Delete, }, ]); - const data: DataType[] = [ - { - key: 0, - date: '2018-02-11', - amount: 120, - type: 'income', - note: 'transfer', - }, - { - key: 1, - date: '2018-03-11', - amount: 243, - type: 'income', - note: 'transfer', - }, - { - key: 2, - date: '2018-04-11', - amount: 98, - type: 'income', - note: 'transfer', - }, - ]; const handleResize = (index: number) => @@ -117,12 +111,10 @@ const App: React.FC = () => { })); return ( -
bordered components={{ - header: { - cell: ResizableTitle, - }, + header: { cell: ResizableTitle }, }} columns={mergedColumns} dataSource={data}