diff --git a/.changeset/fix-table-selection-types.md b/.changeset/fix-table-selection-types.md
new file mode 100644
index 00000000..fba7f0e4
--- /dev/null
+++ b/.changeset/fix-table-selection-types.md
@@ -0,0 +1,9 @@
+---
+"@tiny-design/react": minor
+---
+
+- Table: use Checkbox/Radio components, fix selection bugs with pagination and sorting, improve type definitions
+- List: use semantic `<ul>`/`<li>` elements, add forwardRef to ListItemMeta, fix paginated renderItem index, add ARIA attributes
+- Loader: redesign spinner with CSS-only border animation, remove dot elements
+- Button: fix icon container shrinking in flex layout
+- useVirtualScroll: add `enabled` option
diff --git a/packages/react/src/_utils/use-virtual-scroll.ts b/packages/react/src/_utils/use-virtual-scroll.ts
index de381fee..222a6f50 100644
--- a/packages/react/src/_utils/use-virtual-scroll.ts
+++ b/packages/react/src/_utils/use-virtual-scroll.ts
@@ -5,6 +5,7 @@ export interface UseVirtualScrollOptions {
   itemHeight: number;
   containerHeight: number;
   overscan?: number;
+  enabled?: boolean;
 }
 
 export interface UseVirtualScrollResult {
@@ -15,12 +16,14 @@ export interface UseVirtualScrollResult {
 }
 
 export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualScrollResult {
-  const { itemCount, itemHeight, containerHeight, overscan = 3 } = options;
+  const { itemCount, itemHeight, containerHeight, overscan = 3, enabled = true } = options;
   const [scrollTop, setScrollTop] = useState(0);
 
   const onScroll = useCallback((e: React.UIEvent<HTMLElement>) => {
-    setScrollTop(e.currentTarget.scrollTop);
-  }, []);
+    if (enabled) {
+      setScrollTop(e.currentTarget.scrollTop);
+    }
+  }, [enabled]);
 
   const totalHeight = itemCount * itemHeight;
 
diff --git a/packages/react/src/button/demo/Loading.tsx b/packages/react/src/button/demo/Loading.tsx
index d00c5c06..de9addfc 100644
--- a/packages/react/src/button/demo/Loading.tsx
+++ b/packages/react/src/button/demo/Loading.tsx
@@ -4,8 +4,8 @@ import { Button, Flex } from '@tiny-design/react';
 export default function LoadingDemo() {
   return (
     <Flex gap="sm">
-      <Button loading>Default Button</Button>
-      <Button loading btnType="primary">Primary Button</Button>
+      <Button loading>Default</Button>
+      <Button loading btnType="primary">Primary</Button>
       <Button loading btnType="link">Link</Button>
     </Flex>
   );
diff --git a/packages/react/src/button/style/_index.scss b/packages/react/src/button/style/_index.scss
index 31563757..d0f33273 100755
--- a/packages/react/src/button/style/_index.scss
+++ b/packages/react/src/button/style/_index.scss
@@ -29,6 +29,7 @@ $btn-prefix: #{$prefix}-btn;
 
   &__icon-container, &__loader {
     display: inline-block;
+    flex-shrink: 0;
     pointer-events: none;
     line-height: $btn-line-height;
     vertical-align: middle;
diff --git a/packages/react/src/list/__tests__/__snapshots__/list.test.tsx.snap b/packages/react/src/list/__tests__/__snapshots__/list.test.tsx.snap
index affa4673..3f7de8af 100644
--- a/packages/react/src/list/__tests__/__snapshots__/list.test.tsx.snap
+++ b/packages/react/src/list/__tests__/__snapshots__/list.test.tsx.snap
@@ -3,50 +3,55 @@
 exports[`<List /> should match the snapshot 1`] = `
 <DocumentFragment>
   <div
+    aria-busy="false"
     class="ty-list ty-list_md ty-list_split"
   >
     <div
       class="ty-list__body"
     >
-      <div
-        class="ty-list-item"
+      <ul
+        class="ty-list__items"
       >
-        <div
-          class="ty-list-item__main"
+        <li
+          class="ty-list-item"
         >
           <div
-            class="ty-list-item__content"
+            class="ty-list-item__main"
           >
-            Item 1
+            <div
+              class="ty-list-item__content"
+            >
+              Item 1
+            </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="ty-list-item"
-      >
-        <div
-          class="ty-list-item__main"
+        </li>
+        <li
+          class="ty-list-item"
         >
           <div
-            class="ty-list-item__content"
+            class="ty-list-item__main"
           >
-            Item 2
+            <div
+              class="ty-list-item__content"
+            >
+              Item 2
+            </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="ty-list-item"
-      >
-        <div
-          class="ty-list-item__main"
+        </li>
+        <li
+          class="ty-list-item"
         >
           <div
-            class="ty-list-item__content"
+            class="ty-list-item__main"
           >
-            Item 3
+            <div
+              class="ty-list-item__content"
+            >
+              Item 3
+            </div>
           </div>
-        </div>
-      </div>
+        </li>
+      </ul>
     </div>
   </div>
 </DocumentFragment>
diff --git a/packages/react/src/list/index.tsx b/packages/react/src/list/index.tsx
index 40655b0b..43503268 100644
--- a/packages/react/src/list/index.tsx
+++ b/packages/react/src/list/index.tsx
@@ -1,10 +1,15 @@
+import React from 'react';
 import List from './list';
 import ListItem from './list-item';
 import ListItemMeta from './list-item-meta';
+import { ListProps } from './types';
 
-type IList = typeof List & {
+type IList = (<T = any>(
+  props: ListProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement | null) & {
   Item: typeof ListItem;
   ItemMeta: typeof ListItemMeta;
+  displayName?: string;
 };
 
 const DefaultList = List as IList;
diff --git a/packages/react/src/list/list-item-meta.tsx b/packages/react/src/list/list-item-meta.tsx
index b1f86a3a..9c741ffe 100644
--- a/packages/react/src/list/list-item-meta.tsx
+++ b/packages/react/src/list/list-item-meta.tsx
@@ -4,14 +4,22 @@ import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { ListItemMetaProps } from './types';
 
-const ListItemMeta = (props: ListItemMetaProps): React.ReactElement => {
-  const { avatar, title, description, prefixCls: customisedCls, className, style } = props;
+const ListItemMeta = React.forwardRef<HTMLDivElement, ListItemMetaProps>((props, ref) => {
+  const {
+    avatar,
+    title,
+    description,
+    prefixCls: customisedCls,
+    className,
+    style,
+    ...otherProps
+  } = props;
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('list-item-meta', configContext.prefixCls, customisedCls);
   const cls = classNames(prefixCls, className);
 
   return (
-    <div className={cls} style={style}>
+    <div {...otherProps} ref={ref} className={cls} style={style}>
       {avatar && <div className={`${prefixCls}__avatar`}>{avatar}</div>}
       <div className={`${prefixCls}__content`}>
         {title && <div className={`${prefixCls}__title`}>{title}</div>}
@@ -19,7 +27,7 @@ const ListItemMeta = (props: ListItemMetaProps): React.ReactElement => {
       </div>
     </div>
   );
-};
+});
 
 ListItemMeta.displayName = 'ListItemMeta';
 export default ListItemMeta;
diff --git a/packages/react/src/list/list-item.tsx b/packages/react/src/list/list-item.tsx
index a1a6688f..d45f8925 100644
--- a/packages/react/src/list/list-item.tsx
+++ b/packages/react/src/list/list-item.tsx
@@ -4,7 +4,7 @@ import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { ListItemProps } from './types';
 
-const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>((props, ref) => {
+const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>((props, ref) => {
   const {
     extra,
     actions,
@@ -20,11 +20,11 @@ const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>((props, ref) =>
   const cls = classNames(prefixCls, className);
 
   return (
-    <div {...otherProps} ref={ref} className={cls} style={style}>
+    <li {...otherProps} ref={ref} className={cls} style={style}>
       <div className={`${prefixCls}__main`}>
         <div className={`${prefixCls}__content`}>{children}</div>
         {actions && actions.length > 0 && (
-          <ul className={`${prefixCls}__actions`}>
+          <ul className={`${prefixCls}__actions`} aria-label="Actions">
             {actions.map((action, i) => (
               <li key={i} className={`${prefixCls}__action`}>
                 {action}
@@ -34,7 +34,7 @@ const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>((props, ref) =>
         )}
       </div>
       {extra && <div className={`${prefixCls}__extra`}>{extra}</div>}
-    </div>
+    </li>
   );
 });
 
diff --git a/packages/react/src/list/list.tsx b/packages/react/src/list/list.tsx
index d16a0a2f..dcab7f63 100644
--- a/packages/react/src/list/list.tsx
+++ b/packages/react/src/list/list.tsx
@@ -52,6 +52,7 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {
     itemCount: dataSource.length,
     itemHeight,
     containerHeight: height ?? 0,
+    enabled: isVirtual,
   });
 
   const cls = classNames(prefixCls, className, {
@@ -78,7 +79,7 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {
     if (isVirtual) {
       if (dataSource.length === 0) {
         return (
-          <div className={`${prefixCls}__empty`}>
+          <div className={`${prefixCls}__empty`} role="status">
             {locale?.emptyText ?? 'No Data'}
           </div>
         );
@@ -89,10 +90,16 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {
           <React.Fragment key={start + i}>{renderItem(item, start + i)}</React.Fragment>
         ));
         return (
-          <div style={{ height: totalHeight, position: 'relative' }}>
-            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${offsetY}px)` }}>
+          <div
+            style={{ height: totalHeight, position: 'relative' }}
+            aria-rowcount={dataSource.length}
+          >
+            <ul
+              className={`${prefixCls}__items`}
+              style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${offsetY}px)` }}
+            >
               {visibleItems}
-            </div>
+            </ul>
           </div>
         );
       }
@@ -102,18 +109,22 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {
     const items = paginatedData();
     if (items.length === 0 && !children) {
       return (
-        <div className={`${prefixCls}__empty`}>
+        <div className={`${prefixCls}__empty`} role="status">
           {locale?.emptyText ?? 'No Data'}
         </div>
       );
     }
     if (renderItem) {
+      const page = pagination ? (pagination.current ?? currentPage) : 1;
+      const startIndex = pagination ? (page - 1) * pageSize : 0;
       const rendered = items.map((item, index) => (
-        <React.Fragment key={index}>{renderItem(item, index)}</React.Fragment>
+        <React.Fragment key={startIndex + index}>
+          {renderItem(item, startIndex + index)}
+        </React.Fragment>
       ));
       if (grid) {
         return (
-          <div
+          <ul
             className={`${prefixCls}__grid`}
             style={{
               display: 'grid',
@@ -122,10 +133,10 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {
             }}
           >
             {rendered}
-          </div>
+          </ul>
         );
       }
-      return rendered;
+      return <ul className={`${prefixCls}__items`}>{rendered}</ul>;
     }
     return children;
   };
@@ -144,11 +155,11 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {
     : undefined;
 
   return (
-    <div {...otherProps} ref={ref} className={cls} style={style}>
+    <div {...otherProps} ref={ref} aria-busy={loading} className={cls} style={style}>
       {header && <div className={`${prefixCls}__header`}>{header}</div>}
       <div className={bodyCls} style={bodyStyle} onScroll={isVirtual ? onScroll : undefined}>
         {loading ? (
-          <div className={`${prefixCls}__loading`}>Loading...</div>
+          <div className={`${prefixCls}__loading`} role="status" aria-live="polite">Loading...</div>
         ) : (
           renderItems()
         )}
@@ -171,4 +182,6 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {
 });
 
 List.displayName = 'List';
-export default List;
+export default List as <T = any>(
+  props: ListProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement | null;
diff --git a/packages/react/src/list/style/_index.scss b/packages/react/src/list/style/_index.scss
index e5f2a990..af0985a1 100644
--- a/packages/react/src/list/style/_index.scss
+++ b/packages/react/src/list/style/_index.scss
@@ -49,6 +49,13 @@
     }
   }
 
+  &__items,
+  &__grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
   &__empty {
     padding: 24px;
     text-align: center;
diff --git a/packages/react/src/list/types.ts b/packages/react/src/list/types.ts
index d76e7ac0..66e9a373 100644
--- a/packages/react/src/list/types.ts
+++ b/packages/react/src/list/types.ts
@@ -36,13 +36,15 @@ export interface ListPaginationProps extends Pick<PaginationProps, 'size' | 'ali
 
 export interface ListItemProps
   extends BaseProps,
-    React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
+    React.PropsWithoutRef<JSX.IntrinsicElements['li']> {
   extra?: React.ReactNode;
   actions?: React.ReactNode[];
   children?: React.ReactNode;
 }
 
-export interface ListItemMetaProps extends BaseProps {
+export interface ListItemMetaProps
+  extends BaseProps,
+    Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'title'> {
   avatar?: React.ReactNode;
   title?: React.ReactNode;
   description?: React.ReactNode;
diff --git a/packages/react/src/loader/__tests__/__snapshots__/loader.test.tsx.snap b/packages/react/src/loader/__tests__/__snapshots__/loader.test.tsx.snap
index 685f4382..87ab9793 100644
--- a/packages/react/src/loader/__tests__/__snapshots__/loader.test.tsx.snap
+++ b/packages/react/src/loader/__tests__/__snapshots__/loader.test.tsx.snap
@@ -12,20 +12,7 @@ exports[`<Loader /> should match the snapshot 1`] = `
     >
       <div
         class="ty-loader__indicator ty-loader__indicator_md"
-      >
-        <span
-          class="ty-loader__indicator-dot"
-        />
-        <span
-          class="ty-loader__indicator-dot"
-        />
-        <span
-          class="ty-loader__indicator-dot"
-        />
-        <span
-          class="ty-loader__indicator-dot"
-        />
-      </div>
+      />
     </div>
   </div>
 </DocumentFragment>
diff --git a/packages/react/src/loader/indicator.tsx b/packages/react/src/loader/indicator.tsx
index 6c9b6339..b34eb177 100644
--- a/packages/react/src/loader/indicator.tsx
+++ b/packages/react/src/loader/indicator.tsx
@@ -8,14 +8,7 @@ type Props = {
 
 const Indicator = (props: Props): React.ReactElement => {
   const { size, className } = props;
-  return (
-    <div className={`${className} ${className}_${size}`}>
-      <span className={`${className}-dot`} />
-      <span className={`${className}-dot`} />
-      <span className={`${className}-dot`} />
-      <span className={`${className}-dot`} />
-    </div>
-  );
+  return <div className={`${className} ${className}_${size}`} />;
 };
 
 export default Indicator;
diff --git a/packages/react/src/loader/style/_index.scss b/packages/react/src/loader/style/_index.scss
index 87cda31a..b9a6ab96 100755
--- a/packages/react/src/loader/style/_index.scss
+++ b/packages/react/src/loader/style/_index.scss
@@ -9,44 +9,44 @@
   &__indicator {
     position: relative;
     display: inline-block;
-    font-size: 20px;
-    width: 1em;
-    height: 1em;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    border: var(--ty-loader-border-width) solid transparent;
+    border-right-color: currentcolor;
     margin: 5px;
-    animation: ty-rotate 1s linear infinite;
-  }
+    animation: ty-loader-spin 1s infinite linear;
 
-  &__indicator-dot {
-    position: absolute;
-    display: block;
-    transform: scale(0.75);
-    background-color: currentcolor;
-    border-radius: 50%;
-    transform-origin: 50% 50%;
-    opacity: 0.5;
-    animation: dot-opacity 2s linear infinite;
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      inset: calc(var(--ty-loader-border-width) * -1);
+      border-radius: 50%;
+      border: inherit;
+      animation: inherit;
+      animation-duration: 2s;
+    }
 
-    &:nth-child(1) {
-      top: 0;
-      left: 0;
+    &::after {
+      animation-duration: 4s;
     }
 
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
-      animation-delay: .4s;
+    &_sm {
+      --ty-loader-border-width: 2px;
+
+      width: 16px;
     }
 
-    &:nth-child(3) {
-      right: 0;
-      bottom: 0;
-      animation-delay: .8s;
+    &_md {
+      --ty-loader-border-width: 3px;
+
+      width: 24px;
     }
 
-    &:nth-child(4) {
-      bottom: 0;
-      left: 0;
-      animation-delay: 1.2s;
+    &_lg {
+      --ty-loader-border-width: 4px;
+
+      width: 36px;
     }
   }
 
@@ -57,45 +57,6 @@
     font-size: 16px;
   }
 
-  &_md {
-    .#{$prefix}-loader{
-      &__indicator{
-        font-size: 20px;
-      }
-
-      &__indicator-dot {
-        width: 9px;
-        height: 9px;
-      }
-    }
-  }
-
-  &_lg {
-    .#{$prefix}-loader{
-      &__indicator{
-        font-size: 32px;
-      }
-
-      &__indicator-dot {
-        width: 14px;
-        height: 14px;
-      }
-    }
-  }
-
-  &_sm {
-    .#{$prefix}-loader{
-      &__indicator{
-        font-size: 14px;
-      }
-
-      &__indicator-dot {
-        width: 6px;
-        height: 6px;
-      }
-    }
-  }
-
   &__loader-container {
     width: 100%;
     height: 100%;
@@ -127,16 +88,8 @@
   }
 }
 
-@keyframes dot-opacity {
-  0% {
-    opacity: 0.2;
-  }
-
-  50% {
-    opacity: 0.9;
-  }
-
+@keyframes ty-loader-spin {
   100% {
-    opacity: 0.2;
+    transform: rotate(1turn);
   }
 }
diff --git a/packages/react/src/table/index.md b/packages/react/src/table/index.md
index 1c7aef5d..9a11bf63 100644
--- a/packages/react/src/table/index.md
+++ b/packages/react/src/table/index.md
@@ -120,6 +120,8 @@ Render large tables efficiently with virtual scrolling. The header stays fixed w
 | onChange      | sort/pagination change callback      | (pagination, sorter) => void                    |         |
 | emptyText     | empty state text                     | ReactNode                                       | No Data |
 | showHeader    | show table header                    | boolean                                         | true    |
+| rowClassName  | custom row class name                | string &#124; (record, index) => string             |         |
+| onRow         | row event handler                    | (record, index) => HTMLAttributes                |         |
 
 ### ColumnType
 
@@ -132,7 +134,9 @@ Render large tables efficiently with virtual scrolling. The header stays fixed w
 | align        | text alignment              | `left` &#124; `center` &#124; `right`           | left    |
 | sorter       | enable sorting              | boolean &#124; (a, b) => number              |         |
 | render       | custom cell renderer        | (value, record, index) => ReactNode      |         |
+| defaultSortOrder | default sort order     | `ascend` &#124; `descend`                    |         |
 | ellipsis     | truncate long content       | boolean                                  | false   |
+| className    | custom column class name    | string                                   |         |
 
 ### RowSelection
 
diff --git a/packages/react/src/table/index.zh_CN.md b/packages/react/src/table/index.zh_CN.md
index cf1454af..b8869859 100644
--- a/packages/react/src/table/index.zh_CN.md
+++ b/packages/react/src/table/index.zh_CN.md
@@ -120,6 +120,8 @@ import { Table } from 'tiny-design';
 | onChange      | 排序/分页变化回调    | (pagination, sorter) => void                    |         |
 | emptyText     | 空状态文本           | ReactNode                                       | 暂无数据 |
 | showHeader    | 显示表头             | boolean                                         | true    |
+| rowClassName  | 自定义行类名         | string &#124; (record, index) => string             |         |
+| onRow         | 行事件处理           | (record, index) => HTMLAttributes                |         |
 
 ### ColumnType
 
@@ -132,7 +134,9 @@ import { Table } from 'tiny-design';
 | align        | 对齐方式       | `left` &#124; `center` &#124; `right`           | left    |
 | sorter       | 排序功能       | boolean &#124; (a, b) => number              |         |
 | render       | 自定义渲染     | (value, record, index) => ReactNode      |         |
+| defaultSortOrder | 默认排序方向 | `ascend` &#124; `descend`                    |         |
 | ellipsis     | 文本溢出省略   | boolean                                  | false   |
+| className    | 自定义列类名   | string                                   |         |
 
 ### RowSelection
 
diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index 299173e4..0375ba62 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -4,6 +4,8 @@ import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { useVirtualScroll } from '../_utils/use-virtual-scroll';
 import Pagination from '../pagination';
+import Checkbox from '../checkbox';
+import Radio from '../radio';
 import { TableProps, ColumnType, SortOrder } from './types';
 
 const ROW_HEIGHT_MAP = { sm: 40, md: 48, lg: 56 } as const;
@@ -81,7 +83,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
         break;
       }
     }
-  }, []);
+  }, [columns]);
 
   const sortedData = useMemo(() => {
     if (!sortField || !sortOrder) return [...dataSource];
@@ -143,13 +145,14 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
 
   const handlePageChange = (page: number) => {
     setCurrentPage(page);
-    pagination && pagination.onChange?.(page, pageSize);
+    paginationConfig?.onChange?.(page, pageSize);
     onChange?.({ current: page, pageSize }, { field: sortField, order: sortOrder });
   };
 
   const handleSelectAll = () => {
     if (!rowSelection) return;
-    const allKeys = paginatedData.map((record, i) => getRowKey(record, rowKey, i));
+    const offset = (!isVirtual && pagination !== false) ? (activePage - 1) * pageSize : 0;
+    const allKeys = paginatedData.map((record, i) => getRowKey(record, rowKey, offset + i));
     const allSelected = allKeys.every((k) => selectedKeys.includes(k));
     const newKeys = allSelected ? [] : allKeys;
     if (!rowSelection.selectedRowKeys) {
@@ -173,7 +176,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
     if (!rowSelection.selectedRowKeys) {
       setSelectedKeys(newKeys);
     }
-    const newRows = dataSource.filter((r, i) => newKeys.includes(getRowKey(r, rowKey, i)));
+    const newRows = sortedData.filter((r, i) => newKeys.includes(getRowKey(r, rowKey, i)));
     rowSelection.onChange?.(newKeys, newRows);
   };
 
@@ -195,7 +198,8 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
     wrapperStyle.overflowY = 'auto';
   }
 
-  const allPageKeys = paginatedData.map((r, i) => getRowKey(r, rowKey, i));
+  const pageOffset = (!isVirtual && pagination !== false) ? (activePage - 1) * pageSize : 0;
+  const allPageKeys = paginatedData.map((r, i) => getRowKey(r, rowKey, pageOffset + i));
   const allSelected = allPageKeys.length > 0 && allPageKeys.every((k) => selectedKeys.includes(k));
   const someSelected = allPageKeys.some((k) => selectedKeys.includes(k));
 
@@ -212,12 +216,19 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
       <tr key={key} className={rowCls} {...rowProps}>
         {rowSelection && (
           <td className={`${prefixCls}__cell ${prefixCls}__selection-col`}>
-            <input
-              type={rowSelection.type === 'radio' ? 'radio' : 'checkbox'}
-              checked={isSelected}
-              onChange={() => handleSelectRow(record, key)}
-              aria-label={`Select row ${rowIndex + 1}`}
-            />
+            {rowSelection.type === 'radio' ? (
+              <Radio
+                checked={isSelected}
+                onChange={() => handleSelectRow(record, key)}
+                aria-label={`Select row ${rowIndex + 1}`}
+              />
+            ) : (
+              <Checkbox
+                checked={isSelected}
+                onChange={() => handleSelectRow(record, key)}
+                aria-label={`Select row ${rowIndex + 1}`}
+              />
+            )}
           </td>
         )}
         {columns.map((col, colIndex) => {
@@ -294,7 +305,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
       );
     }
 
-    return paginatedData.map((record, rowIndex) => renderRow(record, rowIndex));
+    return paginatedData.map((record, i) => renderRow(record, pageOffset + i));
   };
 
   const theadCls = classNames(`${prefixCls}__thead`, {
@@ -317,10 +328,9 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
                 {rowSelection && (
                   <th className={`${prefixCls}__cell ${prefixCls}__selection-col`}>
                     {rowSelection.type !== 'radio' && (
-                      <input
-                        type="checkbox"
+                      <Checkbox
                         checked={allSelected}
-                        ref={(el) => { if (el) el.indeterminate = someSelected && !allSelected; }}
+                        indeterminate={someSelected && !allSelected}
                         onChange={handleSelectAll}
                         aria-label="Select all"
                       />
diff --git a/packages/react/src/table/types.ts b/packages/react/src/table/types.ts
index fa28caa2..3ebc209e 100644
--- a/packages/react/src/table/types.ts
+++ b/packages/react/src/table/types.ts
@@ -7,11 +7,10 @@ export type ColumnAlign = 'left' | 'center' | 'right';
 
 export interface ColumnType<T = any> {
   title: React.ReactNode;
-  dataIndex?: string;
+  dataIndex?: keyof T & string;
   key?: string;
   width?: number | string;
   align?: ColumnAlign;
-  fixed?: 'left' | 'right';
   sorter?: boolean | ((a: T, b: T) => number);
   defaultSortOrder?: SortOrder;
   render?: (value: any, record: T, index: number) => React.ReactNode;
@@ -19,11 +18,11 @@ export interface ColumnType<T = any> {
   className?: string;
 }
 
-export type RowSelection<T = any> = {
+export interface RowSelection<T = any> {
   selectedRowKeys?: React.Key[];
   onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
   type?: 'checkbox' | 'radio';
-};
+}
 
 export interface TablePaginationConfig extends Pick<PaginationProps, 'size' | 'align' | 'disabled'> {
   current?: number;