XphTable 可配置列表
基本使用
import React, { useRef, useState, ForwardedRef, forwardRef } from "react";
import {
XphTable,
TXphTableProps,
TXphTableActionType,
XphExtendCompPropsProvider,
XphCrudFormDialog,
TXphCrudFormDialogProps,
IXphCrudFormDialogActionType,
} from "xph-crud";
const ResetPasswordDialog = forwardRef(
(_, dialogRef: ForwardedRef<IXphCrudFormDialogActionType>) => {
const dialogProps: TXphCrudFormDialogProps = {
width: 400,
title: "重置密码",
getPopperContainer: () => document.getElementById("docs-comp-table-base"),
formProps: {
items: [
{
name: "password",
label: "密码",
required: true,
component: "InputPassword",
},
],
},
};
return <XphCrudFormDialog ref={dialogRef} {...dialogProps} />;
}
);
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
const ReactApp: React.FC = () => {
const [crudDialogWidth, setCrudDialogWidth] = useState(500);
const props: TXphTableProps<DataType> = {
table: {
rowSelection: {
type: "checkbox",
},
fullHeight: true,
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
cellFunc: [
{
component: "link",
componentProps: {
url: "https://www.taobao.com",
},
},
],
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
cellFunc: [
{
component: "link",
componentProps: {
url: "https://www.taobao.com",
},
},
{
component: "tag",
componentProps: {
enums: [
{
label: "男",
value: "male",
config: {
color: "info",
},
},
{
label: "女",
value: "female",
config: {
color: "primary",
},
},
],
},
},
],
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
cellFunc: [
{
component: "copy",
componentProps: {},
},
],
},
{
title: "年龄",
dataIndex: "age",
key: "age",
cellFunc: ({ record }) => [
{
component: "link",
componentProps: {
url: "https://www.baidu.com",
},
},
{
component: "link",
componentProps: {
onClick: () => {
window.open("https://www.jd.com/");
},
},
},
],
},
{
title: "操作",
dataIndex: "actions",
fixed: "right",
width: 300,
cellFunc: ({ record }) => [
{
component: "actions",
componentProps: {
type: "dashed",
max: 2,
items: [
{
key: "edit",
component: "Button",
componentProps: {
children: "编辑",
onClick: (e) => {
xphTableRef.current?.open({
data: record,
ok: async ({ values }) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(values);
}, 3000);
});
},
cancel: async ({ values }) => {
console.log(values);
},
});
},
},
},
{
key: "reset-password",
component: "Button",
componentProps: {
children: "重置密码",
onClick: (e) => {
resetPasswordDialogRef.current?.open({
data: record,
});
},
},
},
{
key: "more",
component: "Dropdown",
componentProps: {
children: "我是下拉",
dropDownItems: [
{
key: "1",
label: "我是下拉1",
},
{
key: "2",
label: "我是下拉2",
},
],
onClick: (e) => {
console.log(e);
},
},
},
{
key: "render",
render: <div>我是自定义render</div>,
},
],
},
},
],
},
],
autoPagination: true,
api: async (params) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1", // 超长英文
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
{
key: "4",
name: "王小明",
age: 25,
address: "北城区北门大街4号",
gender: "male",
},
{
key: "5",
name: "赵丽颖",
age: 29,
address: "中城区中山路5号",
gender: "female",
},
{
key: "6",
name: "陈晓",
age: 31,
address: "西湖区湖底公园6号",
gender: "male",
},
{
key: "7",
name: "刘亦菲",
age: 27,
address: "东城区东华门大街7号",
gender: "female",
},
{
key: "8",
name: "张三",
age: 33,
address: "南山区南山路8号",
gender: "male",
},
{
key: "9",
name: "李四",
age: 26,
address: "北城区北门大街9号",
gender: "male",
},
{
key: "10",
name: "王五",
age: 35,
address: "中城区中山路10号",
gender: "male",
},
{
key: "11",
name: "赵六",
age: 34,
address: "西湖区湖底公园11号",
gender: "male",
},
{
key: "12",
name: "孙七",
age: 28,
address: "东城区东华门大街12号",
gender: "female",
},
{
key: "13",
name: "周八",
age: 29,
address: "南山区南山路13号",
gender: "male",
},
{
key: "14",
name: "吴九",
age: 31,
address: "北城区北门大街14号",
gender: "male",
},
{
key: "15",
name: "郑十",
age: 27,
address: "中城区中山路15号",
gender: "male",
},
{
key: "16",
name: "何十一",
age: 30,
address: "西湖区湖底公园16号",
gender: "female",
},
{
key: "17",
name: "冯十二",
age: 33,
address: "东城区东华门大街17号",
gender: "male",
},
{
key: "18",
name: "褚十三",
age: 32,
address: "南山区南山路18号",
gender: "female",
},
{
key: "19",
name: "卫十四",
age: 29,
address: "北城区北门大街19号",
gender: "male",
},
{
key: "20",
name: "蒋十五",
age: 28,
address: "中城区中山路20号",
gender: "male",
},
{
key: "21",
name: "沈十六",
age: 31,
address: "西湖区湖底公园21号",
gender: "male",
},
{
key: "22",
name: "韩十七",
age: 34,
address: "东城区东华门大街22号",
gender: "female",
},
{
key: "23",
name: "杨十八",
age: 27,
address: "南山区南山路23号",
gender: "male",
},
{
key: "24",
name: "朱十九",
age: 30,
address: "北城区北门大街24号",
gender: "male",
},
{
key: "25",
name: "秦二十",
age: 33,
address: "中城区中山路25号",
gender: "male",
},
{
key: "26",
name: "尤二一",
age: 32,
address: "西湖区湖底公园26号",
gender: "female",
},
{
key: "27",
name: "许二二",
age: 29,
address: "东城区东华门大街27号",
gender: "male",
},
{
key: "28",
name: "何二三",
age: 28,
address: "南山区南山路28号",
gender: "female",
},
{
key: "29",
name: "吕二四",
age: 31,
address: "北城区北门大街29号",
gender: "male",
},
{
key: "30",
name: "施二五",
age: 34,
address: "中城区中山路30号",
gender: "male",
},
]);
}, 2000);
});
},
toolbar: {
type: "primary",
max: 2,
items: [
{
key: "add",
component: "Button",
componentProps: {
children: "新增",
onClick: (e) => {
xphTableRef.current?.open({
data: null,
ok: async ({ values }) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(values);
}, 3000);
});
},
cancel: async ({ values }) => {
console.log(values);
},
});
},
},
},
{
key: "more",
component: "Dropdown",
componentProps: {
children: "我是下拉",
dropDownItems: [
{
key: "1",
label: "我是下拉1",
},
{
key: "2",
label: "我是下拉2",
},
],
onClick: (e) => {
console.log(e);
},
},
},
{
key: "render",
render: <div>我是自定义render</div>,
},
],
},
},
searchForm: {
colProps: { span: 6 },
collapsible: true,
items: [
{
name: "Button",
label: "改变crud弹窗宽度",
component: "Button",
componentProps: {
children: "改变crud弹窗宽度",
onClick: (e) => {
setCrudDialogWidth(800);
},
},
},
{
name: "Input",
label: "Input",
component: "Input",
required: true,
initialValue: "Input",
componentProps: {
onChange: (e) => {
console.log(e);
},
},
ifShow: ({ model }) => {
return model.Input2 === "Input1";
},
},
{
name: "Input2",
label: "Input",
component: "Input",
required: true,
initialValue: "Input",
componentProps: {
onChange: (e) => {
console.log(e);
},
},
},
{
name: "Input3",
label: "Input",
component: "Input",
required: true,
initialValue: "Input",
componentProps: {
onChange: (e) => {
console.log(e);
},
},
},
{
name: "Input4",
label: "Input",
component: "Input",
required: true,
initialValue: "Input",
componentProps: {
onChange: (e) => {
console.log(e);
},
},
},
{
name: "Input5",
label: "Input",
component: "Input",
required: true,
initialValue: "Input",
componentProps: {
onChange: (e) => {
console.log(e);
},
},
},
{
name: "Input6",
label: "Input",
component: "Input",
required: true,
initialValue: "Input",
componentProps: {
onChange: (e) => {
console.log(e);
},
},
},
],
},
crudFormDialog: {
width: crudDialogWidth,
title: "弹窗",
// mask: true,
// 弹窗挂载的元素
getPopperContainer: () => document.getElementById("docs-comp-table-base"),
formProps: {
items: [
{
name: "name",
label: "姓名",
component: "Input",
required: true,
initialValue: "",
componentProps: {
onChange: (e) => {
console.log(e);
},
},
colProps: { span: 12 },
},
{
name: "gender",
label: "性别",
component: "Select",
required: true,
componentProps: {
options: [
{
label: "男",
value: "male",
},
{
label: "女",
value: "female",
},
],
onChange: (e) => {
console.log(e);
},
},
colProps: { span: 12 },
},
{
name: "address",
label: "地址",
component: "InputTextArea",
required: true,
componentProps: {
autoSize: {
minRows: 5,
maxRows: 5,
},
},
},
],
},
},
};
const xphTableRef = useRef<TXphTableActionType>(null);
const resetPasswordDialogRef = useRef<IXphCrudFormDialogActionType>(null);
return (
<div
id="docs-comp-table-base"
style={{ minWidth: "1400px", height: "600px", position: "relative" }}
>
<XphExtendCompPropsProvider
value={{ extendProps: { actions: { type: "link", max: 0 } } }}
>
<XphTable<DataType>
ref={xphTableRef}
{...props}
onRowSelectionChange={(selectRowKeys, selectedRows) => {
console.log(selectRowKeys, selectedRows);
}}
/>
{/** 重置密码弹窗 */}
<ResetPasswordDialog ref={resetPasswordDialogRef} />
</XphExtendCompPropsProvider>
</div>
);
};
export default ReactApp;
案例
数据源（api）
姓名 性别 地址 年龄
- 共：0 条
- 1
import React from "react";
import { XphTable, TXphTableProps } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
/** 模拟分页接口 */
const getTablePage = async (params) => {
console.log(params);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: [
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1",
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
],
current: 1,
pageSize: 20,
total: 3,
totalPage: 1,
});
}, 1000);
});
};
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
],
api: getTablePage,
},
};
return <XphTable<DataType> {...props} />;
};
export default ReactApp;
表格撑满父容器
姓名 性别 地址 年龄
- 共：0 条
- 1
import React, { useState } from "react";
import { XphTable, TXphTableProps } from "xph-crud";
import { Radio, Divider } from "antd";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
/** 模拟分页接口 */
const getTablePage = async (params) => {
console.log(params);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: [
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1",
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
],
current: 1,
pageSize: 20,
total: 3,
totalPage: 1,
});
}, 1000);
});
};
const ReactApp: React.FC = () => {
const [fullHeight, setFullHeight] = useState<boolean>(true);
const onChange = (e) => {
setFullHeight(e.target.value);
};
const props: TXphTableProps<DataType> = {
table: {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
],
fullHeight,
api: getTablePage,
},
};
return (
<div>
<Radio.Group
options={[
{
label: "撑满",
value: true,
},
{
label: "自适应",
value: false,
},
]}
onChange={onChange}
value={fullHeight}
optionType="button"
/>
<Divider />
<div style={{ height: "600px", position: "relative" }}>
<XphTable<DataType> {...props} />
</div>
</div>
);
};
export default ReactApp;
禁用首次自动请求
姓名 性别 地址 年龄
- 共：0 条
- 1
import React from "react";
import { XphTable, TXphTableProps } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
/** 模拟分页接口 */
const getTablePage = async (params) => {
console.log(params);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: [
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1",
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
],
current: 1,
pageSize: 20,
total: 3,
totalPage: 1,
});
}, 1000);
});
};
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
],
/** 禁用首次自动请求 */
autoRequest: false,
api: getTablePage,
},
/** 顶部的搜索表单 */
searchForm: {
items: [],
},
};
return <XphTable<DataType> {...props} />;
};
export default ReactApp;
客户端分页（当 api 不支持分页时）
姓名 性别 地址 年龄
- 共：0 条
- 1
import React from "react";
import { XphTable, TXphTableProps } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
/** 模拟分页接口 */
const getTablePage = async (params) => {
console.log(params);
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1", // 超长英文
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
{
key: "4",
name: "王小明",
age: 25,
address: "北城区北门大街4号",
gender: "male",
},
{
key: "5",
name: "赵丽颖",
age: 29,
address: "中城区中山路5号",
gender: "female",
},
{
key: "6",
name: "陈晓",
age: 31,
address: "西湖区湖底公园6号",
gender: "male",
},
{
key: "7",
name: "刘亦菲",
age: 27,
address: "东城区东华门大街7号",
gender: "female",
},
{
key: "8",
name: "张三",
age: 33,
address: "南山区南山路8号",
gender: "male",
},
{
key: "9",
name: "李四",
age: 26,
address: "北城区北门大街9号",
gender: "male",
},
{
key: "10",
name: "王五",
age: 35,
address: "中城区中山路10号",
gender: "male",
},
{
key: "11",
name: "赵六",
age: 34,
address: "西湖区湖底公园11号",
gender: "male",
},
{
key: "12",
name: "孙七",
age: 28,
address: "东城区东华门大街12号",
gender: "female",
},
{
key: "13",
name: "周八",
age: 29,
address: "南山区南山路13号",
gender: "male",
},
{
key: "14",
name: "吴九",
age: 31,
address: "北城区北门大街14号",
gender: "male",
},
{
key: "15",
name: "郑十",
age: 27,
address: "中城区中山路15号",
gender: "male",
},
{
key: "16",
name: "何十一",
age: 30,
address: "西湖区湖底公园16号",
gender: "female",
},
{
key: "17",
name: "冯十二",
age: 33,
address: "东城区东华门大街17号",
gender: "male",
},
{
key: "18",
name: "褚十三",
age: 32,
address: "南山区南山路18号",
gender: "female",
},
{
key: "19",
name: "卫十四",
age: 29,
address: "北城区北门大街19号",
gender: "male",
},
{
key: "20",
name: "蒋十五",
age: 28,
address: "中城区中山路20号",
gender: "male",
},
{
key: "21",
name: "沈十六",
age: 31,
address: "西湖区湖底公园21号",
gender: "male",
},
]);
}, 1000);
});
};
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
],
fullHeight: true,
api: getTablePage,
/** 客户端自动将数据源分页 */
autoPagination: true,
},
};
return (
<div style={{ height: "600px", position: "relative" }}>
<XphTable<DataType> {...props} />
</div>
);
};
export default ReactApp;
格式化源数据
姓名 性别 地址 年龄
- 共：0 条
- 1
import React from "react";
import { XphTable, TXphTableProps } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
/** 模拟分页接口 */
const getTablePage = async (params) => {
console.log(params);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: [
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1",
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
],
current: 1,
pageSize: 20,
total: 3,
totalPage: 1,
});
}, 1000);
});
};
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
],
api: getTablePage,
formatDataSource: (data) => {
return data.map((item) => ({
...item,
gender: item.gender === "male" ? "男" : "女",
age: item.age + "岁",
}));
},
},
};
return <XphTable<DataType> {...props} />;
};
export default ReactApp;
虚拟滚动
姓名 性别 地址 年龄 No datatips虚拟滚动 column 需给定 width
import React from "react";
import { XphTable, TXphTableProps } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
/** 模拟分页接口 */
const getTablePage = async (params) => {
console.log(params);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: Array.from({ length: 1000 }).map((_, index) => ({
key: index,
name: `姓名${index}`,
age: index,
address: `地址${index}`,
gender: index % 2 === 0 ? "male" : "female",
})),
});
}, 1000);
});
};
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
width: 150,
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
width: 150,
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
width: 150,
},
],
/** 关闭分页 */
pagination: false,
fullHeight: true,
api: getTablePage,
/** 开启虚拟滚动 */
virtual: true,
},
};
return (
<div style={{ height: "600px", position: "relative" }}>
<XphTable<DataType> {...props} />
</div>
);
};
export default ReactApp;
分页配置
姓名 性别 地址 年龄
- 共 0 条
- 1
api响应时，数据源读取的值可根据 responseFields 属性配置；
pagination 为false时会关闭分页，默认读取api响应对象中的data属性；
pagination 为对象时，继承antd Pagination组件的API。
import React from "react";
import { XphTable, TXphTableProps } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
/** 模拟分页接口 */
const getTablePage = async (params) => {
console.log(params);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: Array.from({ length: 3 }).map((_, index) => ({
key: index,
name: `姓名${index}`,
age: index,
address: `地址${index}`,
gender: index % 2 === 0 ? "male" : "female",
})),
current: 1,
pageSize: 100,
total: 3,
totalPage: 1,
});
}, 1000);
});
};
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
],
pagination: {
/** 默认100条 */
pageSize: 100,
/** 自定义总条数节点 */
showTotal: (total) => (
<span style={{ color: "red" }}>共 {total} 条</span>
),
/** 自定义页码 */
pageSizeOptions: [100, 200, 500, 1000],
},
api: getTablePage,
},
};
return <XphTable<DataType> {...props} />;
};
export default ReactApp;
顶部操作项
import React from "react";
import { XphTable, TXphTableProps } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
/** 模拟分页接口 */
const getTablePage = async (params) => {
console.log(params);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: [
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1",
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
],
current: 1,
pageSize: 20,
total: 3,
totalPage: 1,
});
}, 1000);
});
};
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
],
api: getTablePage,
toolbar: {
type: "primary",
max: 2,
items: [
{
key: "add",
component: "Button",
componentProps: {
children: "我是按钮",
onClick: (e) => {
console.log(e);
},
},
},
{
key: "more",
component: "Dropdown",
componentProps: {
children: "我是下拉",
dropDownItems: [
{
key: "1",
label: "我是下拉1",
},
{
key: "2",
label: "我是下拉2",
},
],
onClick: (e) => {
console.log(e);
},
},
},
{
key: "render",
render: <div>我是自定义render</div>,
},
],
},
},
};
return <XphTable<DataType> {...props} />;
};
export default ReactApp;
自定义列内容
import React from "react";
import { XphTable, TXphTableProps } from "xph-crud";
import { Tag } from "antd";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
/** 模拟分页接口 */
const getTablePage = async (params) => {
console.log(params);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: [
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1",
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
],
current: 1,
pageSize: 20,
total: 3,
totalPage: 1,
});
}, 1000);
});
};
const ReactApp: React.FC = () => {
const genderRender = (value, record, index) => {
return (
<Tag color={record.gender === "male" ? "blue" : "pink"}> {value} </Tag>
);
};
const ageRender = (value, record, index) => {
return <Tag color="red"> {value} </Tag>;
};
const props: TXphTableProps<DataType> = {
table: {
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
render: genderRender,
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
render: ageRender,
},
],
api: getTablePage,
},
};
return <XphTable<DataType> {...props} />;
};
export default ReactApp;
列内容组件映射
搜索表单
姓名 性别 地址 年龄
- 共：0 条
- 1
import React, { useRef } from "react";
import { XphTable, TXphTableProps, TXphTableActionType } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
fullHeight: true,
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
cellFunc: [
{
component: "tag",
componentProps: {
enums: [
{
label: "男",
value: "male",
config: {
color: "info",
},
},
{
label: "女",
value: "female",
config: {
color: "primary",
},
},
],
},
},
],
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
],
autoPagination: true,
api: async (params) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1",
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
]);
}, 2000);
});
},
},
searchForm: {
colProps: { span: 7 },
items: [
{
name: "name",
label: "姓名",
component: "Input",
componentProps: {},
},
{
name: "gender",
label: "性别",
component: "Select",
componentProps: {
options: [
{
label: "男",
value: "male",
},
{
label: "女",
value: "female",
},
],
},
},
],
},
};
const xphTableRef = useRef<TXphTableActionType>(null);
return (
<div
id="docs-comp-table-properties-searchForm"
style={{ width: "100%", height: "600px", position: "relative" }}
>
<XphTable<DataType> ref={xphTableRef} {...props} />
</div>
);
};
export default ReactApp;
列表新增/编辑弹窗
import React, { useRef } from "react";
import { XphTable, TXphTableProps, TXphTableActionType } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
fullHeight: true,
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
{
title: "操作",
dataIndex: "actions",
fixed: "right",
width: 300,
cellFunc: ({ record }) => [
{
component: "actions",
componentProps: {
type: "dashed",
max: 2,
items: [
{
key: "edit",
component: "Button",
componentProps: {
children: "编辑",
onClick: (e) => {
xphTableRef.current?.open({
data: record,
ok: async ({ values }) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(values);
}, 3000);
});
},
cancel: async ({ values }) => {
console.log(values);
},
});
},
},
},
],
},
},
],
},
],
autoPagination: true,
api: async (params) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1",
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
]);
}, 2000);
});
},
toolbar: {
type: "primary",
items: [
{
key: "add",
component: "Button",
componentProps: {
children: "新增",
onClick: (e) => {
xphTableRef.current?.open({
data: null,
ok: async ({ values }) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(values);
}, 3000);
});
},
cancel: async ({ values }) => {
console.log(values);
},
});
},
},
},
],
},
},
crudFormDialog: {
title: "用户",
getPopperContainer: () =>
document.getElementById("docs-comp-table-properties-crudFormDialog"),
formProps: {
items: [
{
name: "name",
label: "姓名",
component: "Input",
required: true,
initialValue: "",
componentProps: {
onChange: (e) => {
console.log(e);
},
},
colProps: { span: 12 },
},
{
name: "gender",
label: "性别",
component: "Select",
required: true,
componentProps: {
options: [
{
label: "男",
value: "male",
},
{
label: "女",
value: "female",
},
],
onChange: (e) => {
console.log(e);
},
},
colProps: { span: 12 },
},
{
name: "address",
label: "地址",
component: "InputTextArea",
required: true,
componentProps: {
autoSize: {
minRows: 5,
maxRows: 5,
},
},
},
],
},
},
};
const xphTableRef = useRef<TXphTableActionType>(null);
return (
<div
id="docs-comp-table-properties-crudFormDialog"
style={{ width: "100%", height: "600px", position: "relative" }}
>
<XphTable<DataType> ref={xphTableRef} {...props} />
</div>
);
};
export default ReactApp;
instance
姓名 性别 地址 年龄 操作
- 共：0 条
- 1
import React, { useRef } from "react";
import { XphTable, TXphTableProps, TXphTableActionType } from "xph-crud";
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
gender: "male" | "female";
}
const ReactApp: React.FC = () => {
const props: TXphTableProps<DataType> = {
table: {
fullHeight: true,
columns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
},
{
title: "性别",
dataIndex: "gender",
key: "gender",
cellFunc: [
{
component: "tag",
componentProps: {
enums: [
{
label: "男",
value: "male",
config: {
color: "info",
},
},
{
label: "女",
value: "female",
config: {
color: "primary",
},
},
],
},
},
],
},
{
title: "地址",
dataIndex: "address",
key: "address",
width: 300,
ellipsis: true,
},
{
title: "年龄",
dataIndex: "age",
key: "age",
},
{
title: "操作",
dataIndex: "actions",
fixed: "right",
width: 300,
cellFunc: ({ record }) => [
{
component: "actions",
componentProps: {
type: "dashed",
max: 2,
items: [
{
key: "edit",
component: "Button",
componentProps: {
children: "编辑",
onClick: (e) => {
xphTableRef.current?.open({
data: record,
ok: async ({ values }) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(values);
}, 3000);
});
},
cancel: async ({ values }) => {
console.log(values);
},
});
},
},
},
],
},
},
],
},
],
autoPagination: true,
api: async (params) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{
key: "1",
name: "胡彦斌",
age: 32,
address:
"new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1 new york street 1",
gender: "male",
},
{
key: "2",
name: "李雷",
age: 28,
address: "东城区东华门大街2号",
gender: "male",
},
{
key: "3",
name: "韩梅梅",
age: 30,
address: "南山区南山路3号",
gender: "female",
},
]);
}, 2000);
});
},
toolbar: {
type: "primary",
max: 2,
items: [
{
key: "add",
component: "Button",
componentProps: {
children: "新增",
onClick: (e) => {
xphTableRef.current?.open({
data: null,
ok: async ({ values }) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(values);
}, 3000);
});
},
cancel: async ({ values }) => {
console.log(values);
},
});
},
},
},
],
},
},
searchForm: {
colProps: { span: 6 },
items: [
{
name: "name",
label: "姓名",
component: "Input",
componentProps: {},
},
],
},
crudFormDialog: {
title: "用户",
getPopperContainer: () =>
document.getElementById("docs-comp-table-properties-ref"),
formProps: {
items: [
{
name: "name",
label: "姓名",
component: "Input",
required: true,
initialValue: "",
componentProps: {},
colProps: { span: 12 },
},
{
name: "gender",
label: "性别",
component: "Select",
required: true,
componentProps: {
options: [
{
label: "男",
value: "male",
},
{
label: "女",
value: "female",
},
],
},
colProps: { span: 12 },
},
{
name: "address",
label: "地址",
component: "InputTextArea",
required: true,
componentProps: {
autoSize: {
minRows: 5,
maxRows: 5,
},
},
},
],
},
},
};
const xphTableRef = useRef<TXphTableActionType>(null);
return (
<div
id="docs-comp-table-properties-ref"
style={{ width: "100%", height: "600px", position: "relative" }}
>
<XphTable<DataType> ref={xphTableRef} {...props} />
</div>
);
};
export default ReactApp;
API
在 CodeSandbox 尝试
