demo: update demo

react-component · Sep 28, 2024 · 3dcc4a5 · 3dcc4a5
1 parent 99f61c8
commit 3dcc4a5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/docs/examples/virtual.tsx b/docs/examples/virtual.tsx
@@ -189,31 +189,37 @@ const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
 }));
 
 const Demo = () => {
-  const tblRef = React.useRef<Reference>();
-
+  const table1Ref = React.useRef<Reference>();
+  const table2Ref = React.useRef<Reference>();
   return (
     <div style={{ width: 800, padding: `0 64px` }}>
       <button
         onClick={() => {
-          tblRef.current?.scrollTo({
-            top: 9999999999999,
-          });
+          table1Ref.current?.scrollTo({ top: 9999999999999 });
+          table2Ref.current?.scrollTo({ top: 9999999999999 });
         }}
       >
         Scroll To End
       </button>
-
       <button
         onClick={() => {
-          tblRef.current?.scrollTo({
-            index: data.length - 1,
-          });
+          table1Ref.current?.scrollTo({ top: 0 });
+          table2Ref.current?.scrollTo({ top: 0 });
+        }}
+      >
+        Scroll To Start
+      </button>
+      <button
+        onClick={() => {
+          table1Ref.current?.scrollTo({ index: data.length - 1 });
+          table2Ref.current?.scrollTo({ index: data.length - 1 });
         }}
       >
         Scroll To Key
       </button>
-
       <VirtualTable
+        style={{ marginTop: 16 }}
+        ref={table1Ref}
         columns={columns}
         // expandedRowRender={({ b, c }) => b || c}
         scroll={{ x: 1300, y: 200 }}
@@ -229,14 +235,33 @@ const Demo = () => {
         rowClassName="nice-try"
         getContainerWidth={(ele, width) => {
           // Minus border
-          const borderWidth = getComputedStyle(
-            ele.querySelector('.rc-table-tbody'),
-          ).borderInlineStartWidth;
-          const mergedWidth = width - parseInt(borderWidth, 10);
-
+          const { borderInlineStartWidth } = getComputedStyle(ele.querySelector('.rc-table-tbody'));
+          const mergedWidth = width - parseInt(borderInlineStartWidth, 10);
+          return mergedWidth;
+        }}
+      />
+      <VirtualTable
+        style={{ marginTop: 16 }}
+        ref={table2Ref}
+        columns={columns}
+        // expandedRowRender={({ b, c }) => b || c}
+        scroll={{ x: 1300, y: 200 }}
+        data={data}
+        // data={[]}
+        rowKey="indexKey"
+        expandable={{
+          expandedRowRender: () => 2333,
+          columnWidth: 60,
+          expandedRowClassName: 'good-one-string',
+        }}
+        // onRow={() => ({ className: 'rowed' })}
+        rowClassName="nice-try"
+        getContainerWidth={(ele, width) => {
+          // Minus border
+          const { borderInlineStartWidth } = getComputedStyle(ele.querySelector('.rc-table-tbody'));
+          const mergedWidth = width - parseInt(borderInlineStartWidth, 10);
           return mergedWidth;
         }}
-        ref={tblRef}
       />
     </div>
   );

diff --git a/src/interface.ts b/src/interface.ts
@@ -247,7 +247,7 @@ export interface ExpandableConfig<RecordType> {
   /** @deprecated Please use `EXPAND_COLUMN` in `columns` directly */
   expandIconColumnIndex?: number;
   showExpandColumn?: boolean;
-  expandedRowClassName?: RowClassName<RecordType>;
+  expandedRowClassName?: string | RowClassName<RecordType>;
   childrenColumnName?: string;
   rowExpandable?: (record: RecordType) => boolean;
   columnWidth?: number | string;