diff --git a/packages/design/src/table/__tests__/index.test.tsx b/packages/design/src/table/__tests__/index.test.tsx
index 5d5366ec0..991701bb7 100644
--- a/packages/design/src/table/__tests__/index.test.tsx
+++ b/packages/design/src/table/__tests__/index.test.tsx
@@ -60,6 +60,20 @@ describe('Table', () => {
expect(asFragment().firstChild).toMatchSnapshot();
});
+ it('row selection should work', () => {
+ const { container, asFragment } = render(
+
+ );
+ // selection column
+ expect(container.querySelector('.ant-table-selection-column')).toBeTruthy();
+ // batch operation bar
+ expect(container.querySelector('.ant-table-batch-operation-bar')).toBeTruthy();
+ });
+
it('default pagination should work', () => {
const { container, asFragment } = render();
// pagination.showTotal
diff --git a/packages/design/src/table/demo/row-selection.tsx b/packages/design/src/table/demo/row-selection.tsx
index 67a8b4d26..e42b5e103 100644
--- a/packages/design/src/table/demo/row-selection.tsx
+++ b/packages/design/src/table/demo/row-selection.tsx
@@ -2,7 +2,7 @@ import { Button, Table } from '@oceanbase/design';
import React, { useState } from 'react';
const App: React.FC = () => {
- const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+ const [selectedRowKeys, setSelectedRowKeys] = useState(['4', '5']);
const dataSource = [
{
key: '1',
diff --git a/packages/design/src/table/index.tsx b/packages/design/src/table/index.tsx
index 1cb426437..86158e07c 100644
--- a/packages/design/src/table/index.tsx
+++ b/packages/design/src/table/index.tsx
@@ -10,10 +10,11 @@ import type { ReactElement, ReactNode } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import ConfigProvider from '../config-provider';
import Typography from '../typography';
-import enUS from '../locale/en-US';
import useStyle from './style';
import type { AnyObject } from '../_util/type';
import useDefaultPagination from './hooks/useDefaultPagination';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import enUS from '../locale/en-US';
export * from 'antd/es/table';
@@ -29,6 +30,9 @@ export interface TableLocale extends AntTableLocale {
export interface TableProps extends AntTableProps {
columns?: ColumnsType;
+ cancelText?: string;
+ collapseText?: string;
+ openText?: string;
hiddenCancelBtn?: boolean;
toolOptionsRender?: (selectedRowKeys, selectedRows) => ReactNode[];
toolAlertRender?: false | ((selectedRowKeys, selectedRows) => ReactNode);
@@ -45,6 +49,9 @@ function Table(props: TableProps, ref: React.Ref) {
toolAlertRender,
toolOptionsRender,
toolSelectedContent,
+ cancelText,
+ collapseText,
+ openText,
expandable,
hiddenCancelBtn = false,
prefixCls: customizePrefixCls,
@@ -53,15 +60,18 @@ function Table(props: TableProps, ref: React.Ref) {
const extendedContext = useContext(ConfigProvider.ExtendedConfigContext);
const pagination = useDefaultPagination(customPagination);
+ const { getPrefixCls, locale, table } = useContext(ConfigProvider.ConfigContext);
const { batchOperationBar, ...restLocale } = {
+ ...enUS.Table,
+ ...locale?.Table,
...customLocale,
batchOperationBar: {
...enUS.Table?.batchOperationBar,
+ ...locale?.Table?.batchOperationBar,
...customLocale?.batchOperationBar,
},
};
- const { getPrefixCls, table } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('table', customizePrefixCls);
const { wrapSSR } = useStyle(prefixCls);
const tableCls = classNames(
@@ -72,7 +82,11 @@ function Table(props: TableProps, ref: React.Ref) {
);
const [openPopover, setOpenPopover] = useState(false);
- const [currentSelectedRowKeys, setCurrentSelectedRowKeys] = useState();
+ const [currentSelectedRowKeys, setCurrentSelectedRowKeys] = useMergedState([], {
+ value: rowSelection?.selectedRowKeys,
+ defaultValue: rowSelection?.defaultSelectedRowKeys,
+ });
+
const [currentSelectedRows, setCurrentSelectedRows] = useState([]);
const [currentSelectedInfo, setCurrentSelectedInfo] = useState({});
@@ -157,7 +171,9 @@ function Table(props: TableProps, ref: React.Ref) {
{batchOperationBar?.object}
)}
- {!hiddenCancelBtn && {batchOperationBar?.cancel}}
+ {!hiddenCancelBtn && (
+ {cancelText ?? batchOperationBar?.cancel}
+ )}
{toolSelectedContent && (
(props: TableProps, ref: React.Ref) {
open={openPopover}
>
setOpenPopover(!openPopover)}>
- {openPopover ? batchOperationBar?.collapse : batchOperationBar?.open}
+ {openPopover
+ ? collapseText ?? batchOperationBar?.collapse
+ : openText ?? batchOperationBar?.open}
)}