{
+ const liStyle = {
+ marginBottom: 12
+ }
+ const labelStyle = {
+ display: 'inline-block',
+ width: 100,
+ color: 'rgba(0, 0, 0, 0.45)'
+ };
+ return (
+
+ - 活动ID{row.id}
+ - 活动名称{row.name}
+ - 创建时间{row.createTime}
+ -
+ 活动分类
+ 大促预热
+
+ - 创建人{row.creator}
+
+ )
+ }}
+ /**
+ * 更多 expandable 功能查看 API：https://table-react-component.vercel.app/#api
+ */
+ expandable={{
+ expandRowByClick: true,
+ defaultExpandedRowKeys: ['121410327'],
+ }}
+ supportPage
+ pageOpts={{ showQuickJumper: false, showPageSizeOptions: false }}
+ columnData={columns}
+ ajaxData={(params) => {
+ return new Promise(resolve => {
+ setTimeout(() => {
+ resolve({
+ totals: data.length,
+ data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
+ });
+ }, 500)
+ })
+ }}
+ />
+ );
}
```
diff --git a/src/components/c-table/demos/filter.md b/src/components/c-table/demos/filter.md
index f57166ad6..ccb5d3168 100644
--- a/src/components/c-table/demos/filter.md
+++ b/src/components/c-table/demos/filter.md
@@ -1,7 +1,5 @@
---
-order: 5
-title: CTable
-desc: 表格过滤
+order: 5 title: CTable desc: 表格过滤
---
```jsx
@@ -10,111 +8,163 @@ import { CTable, Icon, Tooltip, Checkbox } from 'cloud-react';
import './style/index.less';
export default function CTableDemo() {
- const [creator, setCreator] = useState('');
- const [showFilterBtn, setShowFilterBtn] = useState(true);
+ const [creator, setCreator] = useState('');
+ const [showFilterBtn, setShowFilterBtn] = useState(true);
- const data = [
- { id: '121410327', name: '手机号优先继续发送1手机号优先继续发送1手机号优先继续发送1手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', category: { status: 'executing', text: '执行中' } },
- { id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao', category: { status: 'success', text: '执行完成' } },
- { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', category: { status: 'fail', text: '执行失败' } },
- { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', category: { status: 'paused', text: '已中止' } },
- { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', category: { status: 'success', text: '执行完成' } },
- ];
+ const data = [
+ {
+ id: '120327',
+ name: '手机号优先继续发送1手机号优先继续发送1手机号优先继续发送1手机号优先继续发送1',
+ createTime: '2021/12/14 10:19:02',
+ creator: 'liyuan.meng',
+ category: { status: 'executing', text: '执行中' }
+ },
+ {
+ id: '120328',
+ name: 'ouid疲劳度3',
+ createTime: '2021/12/13 15:47:33 ',
+ creator: 'jiaojiao.diao',
+ category: { status: 'success', text: '执行完成' }
+ },
+ {
+ id: '120329',
+ name: '继续发送手机1',
+ createTime: '2021/12/13 15:36:42',
+ creator: 'nan.run',
+ category: { status: 'fail', text: '执行失败' }
+ },
+ {
+ id: '128294',
+ name: '继续发送手机2',
+ createTime: '2021/12/13 11:14:40',
+ creator: 'xiaotong.fan',
+ category: { status: 'paused', text: '已中止' }
+ },
+ {
+ id: '127191',
+ name: '继续发送手机3',
+ createTime: '2021/12/13 11:03:05',
+ creator: 'zhenxiao.guo',
+ category: { status: 'success', text: '执行完成' }
+ },
+ ];
- const columns = [
- {
- sortable: true,
- title: '活动ID',
- dataIndex: 'id',
- align: 'left',
- },
- {
- title: '活动名称',
- dataIndex: 'name',
- align: 'left',
- ellipsis: true,
- render: (value) => {
- return (
-
- {value}
-
- )
- }
- },
- {
- title: '创建时间',
- dataIndex: 'createTime',
- align: 'left'
- },
- {
- title: '活动状态',
- dataIndex: 'category',
- align: 'left',
- sortable: true,
- filters: [
- { text: '执行完成', value: 'success' },
- { text: '执行中', value: 'executing' },
- { text: '执行失败', value: 'fail' },
- { text: '执行错误', value: 'error' },
- { text: '已中止', value: 'paused', disabled: true }
- ],
- render: (category) => {
- const styleConfig = {
- 'executing': {
- background: 'rgba(82, 128, 255, 1)'
- },
- 'success': {
- background: 'rgba(33, 186, 69, 1)'
- },
- 'fail': {
- background: 'rgba(231, 73, 73, 1)'
- },
- 'paused': {
- background: 'rgba(0, 0, 0, 0.25)'
- }
- };
+ const columns = [
+ {
+ title: '活动ID左对齐',
+ dataIndex: 'id',
+ width: 150,
+ sortable: true,
+ align: 'left',
+ titleTooltipAlign: 'right',
+ titleTooltipConfig: { content: '说明' },
+ },
+ {
+ title: '活动ID右对齐',
+ dataIndex: 'id',
+ width: 150,
+ sortable: true,
+ align: 'right',
+ titleTooltipAlign: 'right',
+ titleTooltipConfig: { content: '说明' },
+ },
+ {
+ title: '活动名称',
+ dataIndex: 'name',
+ width: 150,
+ align: 'left',
+ ellipsis: true,
+ render: val => {
+ return
+ }
+ },
+ {
+ title: '创建时间',
+ dataIndex: 'createTime',
+ width: 150,
+ align: 'left',
+ render: val => {
+ return
+ }
+ },
+ {
+ title: '活动状态',
+ dataIndex: 'category',
+ width: 150,
+ align: 'left',
+ sortable: true,
+ titleTooltipAlign: 'right',
+ titleTooltipConfig: { content: '说明' },
+ filters: [
+ { text: '执行完成', value: 'success' },
+ { text: '执行中', value: 'executing' },
+ { text: '执行失败', value: 'fail' },
+ { text: '执行错误', value: 'error' },
+ { text: '已中止', value: 'paused', disabled: true }
+ ],
+ render: (category) => {
+ const styleConfig = {
+ 'executing': {
+ background: 'rgba(82, 128, 255, 1)'
+ },
+ 'success': {
+ background: 'rgba(33, 186, 69, 1)'
+ },
+ 'fail': {
+ background: 'rgba(231, 73, 73, 1)'
+ },
+ 'paused': {
+ background: 'rgba(0, 0, 0, 0.25)'
+ }
+ };
- return (
-
+ return (
+
-
- {category.text}
+
+ {category.text}
-
- )
- }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
},
- {
- title: '操作',
- dataIndex: 'creator',
- align: 'left',
- width: 200,
- render: () => {
- const iconStyle = {
- marginRight: 16,
- cursor: 'pointer',
- lineHeight: '20px',
- };
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
- },
- }
- ];
+ }
+ ];
const sort = (data, { sortParams }) => {
if (sortParams?.dataIndex === 'id') {
@@ -128,29 +178,32 @@ export default function CTableDemo() {
return data.filter(item => !filterValue?.length || (filterValue?.length && filterValue.includes(item.category.status)))
};
- return (
-
- {
- setShowFilterBtn(checked)
- }}>
- 筛选项展示确定按钮
-
- {
- return new Promise(resolve => {
- setTimeout(() => {
- const filterData = filter(sort(data, params), params);
- console.log(filterData)
- resolve({ totals: filterData?.length, data: JSON.parse(JSON.stringify(filterData.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum))) });
- }, 200)
- })
- }}
- />
-
- );
+ return (
+
+ {
+ setShowFilterBtn(checked)
+ }}>
+ 筛选项展示确定按钮
+
+ {
+ return new Promise(resolve => {
+ setTimeout(() => {
+ const filterData = filter(sort(data, params), params);
+ console.log(filterData)
+ resolve({
+ totals: filterData?.length,
+ data: JSON.parse(JSON.stringify(filterData.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
+ });
+ }, 200)
+ })
+ }}
+ />
+
+ );
}
```
diff --git a/src/components/c-table/demos/fixed-column.md b/src/components/c-table/demos/fixed-column.md
index 1bd1599cf..bccec38d9 100644
--- a/src/components/c-table/demos/fixed-column.md
+++ b/src/components/c-table/demos/fixed-column.md
@@ -1,7 +1,5 @@
---
-order: 4
-title: CTable
-desc: 固定列
+order: 4 title: CTable desc: 固定列
---
```jsx
@@ -9,84 +7,163 @@ import React, { useState, useRef } from 'react';
import { CTable, Button, Select, Radio, Checkbox } from 'cloud-react';
const data = [
- { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', approver: 'admin', status: '执行完成' },
- { id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao', approver: 'admin', status: '执行中' },
- { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', approver: 'admin', status: '待审批' },
- { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', approver: 'admin', status: '执行完成' },
- { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', approver: 'admin', status: '执行错误' },
- { id: '121407192', name: '继续发送手机4', createTime: '2021/12/13 11:03:07', creator: 'han.wu', approver: 'admin', status: '终止' },
- { id: '121407193', name: '继续发送手机5', createTime: '2021/12/13 11:03:34', creator: 'yue.ren', approver: 'admin', status: '执行完成' },
- { id: '121407194', name: '继续发送手机6', createTime: '2021/12/13 11:03:05', creator: 'wanjuan.dong', approver: 'admin', status: '设计中' },
- { id: '121407195', name: '继续发送手机7', createTime: '2021/12/13 11:03:55', creator: 'ying.yan', approver: 'admin', status: '执行完成' },
- { id: '121407196', name: '继续发送手机8', createTime: '2021/12/13 11:03:23', creator: 'xian.yong', approver: 'admin', status: '执行完成' },
+ {
+ id: '121410327',
+ name: '手机号优先继续发送1',
+ createTime: '2021/12/14 10:19:02',
+ creator: 'liyuan.meng',
+ approver: 'admin',
+ status: '执行完成'
+ },
+ {
+ id: '121410328',
+ name: 'ouid疲劳度3',
+ createTime: '2021/12/13 15:47:33 ',
+ creator: 'jiaojiao.diao',
+ approver: 'admin',
+ status: '执行中'
+ },
+ {
+ id: '121410329',
+ name: '继续发送手机1',
+ createTime: '2021/12/13 15:36:42',
+ creator: 'nan.run',
+ approver: 'admin',
+ status: '待审批'
+ },
+ {
+ id: '121408294',
+ name: '继续发送手机2',
+ createTime: '2021/12/13 11:14:40',
+ creator: 'xiaotong.fan',
+ approver: 'admin',
+ status: '执行完成'
+ },
+ {
+ id: '121407191',
+ name: '继续发送手机3',
+ createTime: '2021/12/13 11:03:05',
+ creator: 'zhenxiao.guo',
+ approver: 'admin',
+ status: '执行错误'
+ },
+ {
+ id: '121407192',
+ name: '继续发送手机4',
+ createTime: '2021/12/13 11:03:07',
+ creator: 'han.wu',
+ approver: 'admin',
+ status: '终止'
+ },
+ {
+ id: '121407193',
+ name: '继续发送手机5',
+ createTime: '2021/12/13 11:03:34',
+ creator: 'yue.ren',
+ approver: 'admin',
+ status: '执行完成'
+ },
+ {
+ id: '121407194',
+ name: '继续发送手机6',
+ createTime: '2021/12/13 11:03:05',
+ creator: 'wanjuan.dong',
+ approver: 'admin',
+ status: '设计中'
+ },
+ {
+ id: '121407195',
+ name: '继续发送手机7',
+ createTime: '2021/12/13 11:03:55',
+ creator: 'ying.yan',
+ approver: 'admin',
+ status: '执行完成'
+ },
+ {
+ id: '121407196',
+ name: '继续发送手机8',
+ createTime: '2021/12/13 11:03:23',
+ creator: 'xian.yong',
+ approver: 'admin',
+ status: '执行完成'
+ },
];
const columns = [
- { title: '活动ID', dataIndex: 'id', align: 'left', width: 200, fixed: 'left' },
- { title: '活动名称', dataIndex: 'name', align: 'left', width: 200 },
- { title: '创建时间', dataIndex: 'createTime', align: 'left', width: 200 },
- { title: '创建人', dataIndex: 'creator', align: 'left', width: 200 },
- { title: '审批人', dataIndex: 'approver', align: 'left', width: 270 },
- { title: '活动状态', dataIndex: 'status', align: 'left' },
- {
- title: '操作',
- dataIndex: 'operator',
- render: (v, row) => (
-
-
-
-
-
- ),
- width: 300,
- fixed: 'right'
+ { title: '活动ID', dataIndex: 'id', align: 'left', width: 200, fixed: 'left' },
+ { title: '活动名称', dataIndex: 'name', align: 'left', width: 200 },
+ {
+ title: '创建时间', dataIndex: 'createTime', width: 200, render: val => {
+ return
}
+ },
+ { title: '创建人', dataIndex: 'creator', align: 'left', width: 200 },
+ { title: '审批人', dataIndex: 'approver', align: 'left', width: 270 },
+ { title: '活动状态', dataIndex: 'status', align: 'left' },
+ {
+ title: '操作',
+ dataIndex: 'operator',
+ render: (v, row) => (
+
+
+
+
+
+ ),
+ width: 300,
+ fixed: 'right'
+ }
];
export default function CTableDemo() {
- const tableRef = useRef();
- const [size, setSize] = useState('default');
- const [valid, setValid] = useState(false);
- const [isReloadGrid, setIsReloadGrid] = useState(true);
+ const tableRef = useRef();
+ const [size, setSize] = useState('default');
+ const [valid, setValid] = useState(false);
+ const [isReloadGrid, setIsReloadGrid] = useState(true);
- return (
-
-
- 基础型表格
- 舒适型表格
- 紧凑型表格
-
-
-
- {
- setIsReloadGrid(checked);
- }}>设置列后，是否需要刷新表格
- {
- return new Promise(resolve => {
- setTimeout(() => {
- resolve({ totals: data.length, data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum))) })
- }, 500);
- });
- }}
- />
-
- );
+ return (
+
+
+ 基础型表格
+ 舒适型表格
+ 紧凑型表格
+
+
+
+ {
+ setIsReloadGrid(checked);
+ }}>设置列后，是否需要刷新表格
+ {
+ return new Promise(resolve => {
+ setTimeout(() => {
+ resolve({
+ totals: data.length,
+ data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
+ })
+ }, 500);
+ });
+ }}
+ />
+
+ );
}
```
diff --git a/src/components/c-table/demos/front-table.md b/src/components/c-table/demos/front-table.md
index 0d3ba2ba3..0eb2e0899 100644
--- a/src/components/c-table/demos/front-table.md
+++ b/src/components/c-table/demos/front-table.md
@@ -9,11 +9,11 @@ import { CTable, Button } from 'cloud-react';
export default function CTableDemo() {
const [data, setData] = useState([
- { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' },
+ { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: 12222 },
{ id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao', num: '198' },
- { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232' },
- { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112' },
- { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000' },
+ { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1232' },
+ { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: 12122112 },
+ { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000000' },
]);
// （1）定义一个 buffer 对象，将 data 赋值给 buffer.bufferData，并监听 data 变化更新 buffer
@@ -33,14 +33,30 @@ export default function CTableDemo() {
// （3）新增操作使用 buffer.bufferData 处理
const onAdd = () => {
- setData([...buffer.bufferData, { id: new Date().getTime(), name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' }])
+ setData([...buffer.bufferData, {
+ id: new Date().getTime(),
+ name: '手机号优先继续发送1',
+ createTime: '2021/12/14 10:19:02',
+ creator: 'liyuan.meng',
+ num: '12,222'
+ }])
};
const columns = [
{ title: '活动ID', dataIndex: 'id', width: 130 },
{ title: '活动名称', dataIndex: 'name', width: 140 },
- { title: '创建时间', dataIndex: 'createTime', width: 140 },
- { title: '人数', dataIndex: 'num', align: 'right', width: 120 },
+ {
+ title: '创建时间', dataIndex: 'createTime', width: 140, render: val => {
+ return
+ }
+ },
+ {
+ title: '人数',
+ dataIndex: 'num',
+ align: 'right',
+ width: 120,
+ render: val =>
+ },
{ title: '创建人', dataIndex: 'creator', width: 130 },
{
title: '操作',
diff --git a/src/components/c-table/demos/front-table1.md b/src/components/c-table/demos/front-table1.md
index 668287e4f..cf4f111a5 100644
--- a/src/components/c-table/demos/front-table1.md
+++ b/src/components/c-table/demos/front-table1.md
@@ -19,14 +19,24 @@ function TableDemo({ data, setData }) {
}
const onAdd = () => {
- setData([...data, { id: new Date().getTime(), name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' }])
+ setData([...data, { id: new Date().getTime(), name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: 12222 }])
};
const columns = [
{ title: '活动ID', dataIndex: 'id', width: 130 },
{ title: '活动名称', dataIndex: 'name', width: 140 },
- { title: '创建时间', dataIndex: 'createTime', width: 140 },
- { title: '人数', dataIndex: 'num', align: 'right', width: 120 },
+ {
+ title: '创建时间', dataIndex: 'createTime', width: 140, render: val => {
+ return
+ }
+ },
+ {
+ title: '人数',
+ dataIndex: 'num',
+ align: 'right',
+ width: 120,
+ render: val =>
+ },
{ title: '创建人', dataIndex: 'creator', width: 130 },
{
title: '操作',
@@ -59,7 +69,7 @@ function TableDemo({ data, setData }) {
export default function CTableDemo() {
const [data, setData] = useState([
- { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' },
+ { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12222' },
]);
return (
diff --git a/src/components/c-table/demos/group.md b/src/components/c-table/demos/group.md
index 76ea53e75..8f9579577 100644
--- a/src/components/c-table/demos/group.md
+++ b/src/components/c-table/demos/group.md
@@ -12,8 +12,8 @@ const data = [
{
key: 1,
name: '一级条目1',
- id: '',
- details: '',
+ id: ' ',
+ details: ' ',
children: [
{
key: 11,
@@ -38,8 +38,8 @@ const data = [
{
key: 3,
name: '一级条目3',
- id: '',
- details: '',
+ id: ' ',
+ details: ' ',
children: [
{
key: 31,
@@ -52,8 +52,8 @@ const data = [
{
key: 4,
name: '一级条目4',
- id: '',
- details: '',
+ id: ' ',
+ details: ' ',
children: [
{
key: 41,
diff --git a/src/components/c-table/demos/header-bordered.md b/src/components/c-table/demos/header-bordered.md
index d45c43f36..8068c1730 100644
--- a/src/components/c-table/demos/header-bordered.md
+++ b/src/components/c-table/demos/header-bordered.md
@@ -18,10 +18,18 @@ const data = [
];
const columns = [
- { title: '活动ID', dataIndex: 'id' },
- { title: '活动名称', dataIndex: 'name' },
- { title: '创建时间', dataIndex: 'createTime' },
- { title: '创建人', dataIndex: 'creator' }
+ { title: '活动ID', dataIndex: 'id', width: 130 },
+ {
+ title: '活动名称', dataIndex: 'name', width: 140, render: val => {
+ return
+ }
+ },
+ {
+ title: '创建时间', dataIndex: 'createTime', width: 140, render: val => {
+ return
+ }
+ },
+ { title: '创建人', dataIndex: 'creator', width: 130 }
];
export default function CTableDemo() {
diff --git a/src/components/c-table/demos/light-row.md b/src/components/c-table/demos/light-row.md
index b851b3367..3d9f9536c 100644
--- a/src/components/c-table/demos/light-row.md
+++ b/src/components/c-table/demos/light-row.md
@@ -1,7 +1,5 @@
---
-order: 1
-title: CTable
-desc: 自定义表格行背景色
+order: 1 title: CTable desc: 自定义表格行背景色
---
```jsx
@@ -9,33 +7,37 @@ import React from 'react';
import { CTable } from 'cloud-react';
const data = [
- { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng' },
- { id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao' },
- { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run' },
- { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan' },
- { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo' },
+ { id: '121410327', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng' },
+ { id: '121410328', name: 'ouid疲劳度3', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao' },
+ { id: '121410329', name: '继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run' },
+ { id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan' },
+ { id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo' },
];
const columns = [
- { title: '活动ID', dataIndex: 'id' },
- { title: '活动名称', dataIndex: 'name' },
- { title: '创建时间', dataIndex: 'createTime' },
- { title: '创建人', dataIndex: 'creator' }
+ { title: '活动ID', dataIndex: 'id' },
+ { title: '活动名称', dataIndex: 'name' },
+ {
+ title: '创建时间', dataIndex: 'createTime', render: val => {
+ return
+ }
+ },
+ { title: '创建人', dataIndex: 'creator' }
];
export default function CTableDemo() {
- return (
- {
- if (row.id === '121410328') {
- // 可以自定义类，在业务中自定义色值
- return "cloud-table-row-lighted";
- }
- return '';
- }}
- columnData={columns}
- ajaxData={{ totals: data.length, data }}
- />
- );
+ return (
+ {
+ if (row.id === '121410328') {
+ // 可以自定义类，在业务中自定义色值
+ return "cloud-table-row-lighted";
+ }
+ return '';
+ }}
+ columnData={columns}
+ ajaxData={{ totals: data.length, data }}
+ />
+ );
}
```
diff --git a/src/components/c-table/demos/radio.md b/src/components/c-table/demos/radio.md
index 415cdaf92..9a95b468d 100644
--- a/src/components/c-table/demos/radio.md
+++ b/src/components/c-table/demos/radio.md
@@ -1,7 +1,5 @@
---
-order: 7
-title: CTable
-desc: 单选
+order: 7 title: CTable desc: 单选
---
```jsx
@@ -23,8 +21,16 @@ const data = [
const columns = [
{ title: '活动ID', dataIndex: 'id' },
- { title: '活动名称', dataIndex: 'name' },
- { title: '创建时间', dataIndex: 'createTime' },
+ {
+ title: '活动名称', dataIndex: 'name', render: val => {
+ return
+ }
+ },
+ {
+ title: '创建时间', dataIndex: 'createTime', render: val => {
+ return
+ }
+ },
{ title: '创建人', dataIndex: 'creator' },
];
@@ -49,7 +55,10 @@ export default function CTableDemo() {
ajaxData={(params) => {
return new Promise(resolve => {
setTimeout(() => {
- resolve({ totals: data.length, data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum))) });
+ resolve({
+ totals: data.length,
+ data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
+ });
}, 200)
})
}}
diff --git a/src/components/c-table/demos/refresh-table.md b/src/components/c-table/demos/refresh-table.md
index aff826671..ce767f245 100644
--- a/src/components/c-table/demos/refresh-table.md
+++ b/src/components/c-table/demos/refresh-table.md
@@ -28,7 +28,11 @@ export default function CTableDemo() {
const columns = [
{ title: '活动ID', dataIndex: 'id' },
{ title: '活动名称', dataIndex: 'name' },
- { title: '创建时间', dataIndex: 'createTime' },
+ {
+ title: '创建时间', dataIndex: 'createTime', render: val => {
+ return
+ }
+ },
{ title: '创建人', dataIndex: 'creator' },
{
title: '操作',
diff --git a/src/components/c-table/demos/resize.md b/src/components/c-table/demos/resize.md
index 0b1ce8486..609fa6b2e 100644
--- a/src/components/c-table/demos/resize.md
+++ b/src/components/c-table/demos/resize.md
@@ -1,7 +1,5 @@
---
-order: 1
-title: CTable
-desc: 默认表格
+order: 1 title: CTable desc: 默认表格
---
```jsx
@@ -14,9 +12,27 @@ import React from 'react';
import { CTable } from 'cloud-react';
const data = [
- { id: '121410327', name: '手机号优先继续发送1手机号优先继续发送1手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' },
- { id: '121410328', name: 'ouid疲劳度3ouid疲劳度3ouid疲劳度3', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao', num: '198' },
- { id: '121410329', name: '继续发送手机1继续发送手机1继续发送手机1继续发送手机1', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232' },
+ {
+ id: '121410327',
+ name: '手机号优先继续发送1手机号优先继续发送1手机号优先继续发送1',
+ createTime: '2021/12/14 10:19:02',
+ creator: 'liyuan.meng',
+ num: '12,222'
+ },
+ {
+ id: '121410328',
+ name: 'ouid疲劳度3ouid疲劳度3ouid疲劳度3',
+ createTime: '2021/12/13 15:47:33 ',
+ creator: 'jiaojiao.diao',
+ num: '198'
+ },
+ {
+ id: '121410329',
+ name: '继续发送手机1继续发送手机1继续发送手机1继续发送手机1',
+ createTime: '2021/12/13 15:36:42',
+ creator: 'nan.run',
+ num: '1,232'
+ },
{ id: '121408294', name: '继续发送手机2', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112' },
{ id: '121407191', name: '继续发送手机3', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000' },
];
@@ -24,19 +40,23 @@ const data = [
const columns = [
{ title: '活动ID', dataIndex: 'id' },
{ title: '活动名称', dataIndex: 'name', width: 200, minWidth: 180, ellipsis: true },
- { title: '创建时间', dataIndex: 'createTime', width: 200, minWidth: 170 },
+ {
+ title: '创建时间', dataIndex: 'createTime', render: val => {
+ return
+ }
+ },
{ title: '人数', dataIndex: 'num', align: 'right' },
{ title: '创建人', dataIndex: 'creator' }
];
export default function CTableDemo() {
- return (
-
- );
+ return (
+
+ );
}
```
diff --git a/src/components/c-table/demos/resize1.md b/src/components/c-table/demos/resize1.md
index 643fc8385..fa0da64dd 100644
--- a/src/components/c-table/demos/resize1.md
+++ b/src/components/c-table/demos/resize1.md
@@ -1,7 +1,5 @@
---
-order: 1
-title: CTable
-desc: 默认表格
+order: 1 title: CTable desc: 默认表格
---
```jsx
@@ -24,19 +22,23 @@ const data = [
const columns = [
{ title: '活动ID', dataIndex: 'id' },
{ title: '活动名称', dataIndex: 'name', width: 200, minWidth: 160 },
- { title: '创建时间', dataIndex: 'createTime', width: 200, minWidth: 170 },
+ {
+ title: '创建时间', dataIndex: 'createTime', width: 200, render: val => {
+ return
+ }
+ },
{ title: '人数', dataIndex: 'num', align: 'right' },
{ title: '创建人', dataIndex: 'creator' }
];
export default function CTableDemo() {
- return (
-
- );
+ return (
+
+ );
}
```
diff --git a/src/components/c-table/demos/sort-front.md b/src/components/c-table/demos/sort-front.md
index c8cd4b9ab..9d968ba8d 100644
--- a/src/components/c-table/demos/sort-front.md
+++ b/src/components/c-table/demos/sort-front.md
@@ -1,7 +1,5 @@
---
-order: 21
-title: CTable
-desc: 表格排序
+order: 21 title: CTable desc: 表格排序
---
```jsx
@@ -14,48 +12,99 @@ import React, { useState } from 'react';
import { CTable, Checkbox } from 'cloud-react';
const data = [
- { id: '121410322', name: 'ouid疲劳度2', createTime: '2021/12/13 15:47:33 ', creator: 'jiaojiao.diao', num: '198', orderNum: '122' },
- { id: '121410323', name: '继续发送手机3', createTime: '2021/12/13 15:36:42', creator: 'nan.run', num: '1,232', orderNum: '1,332' },
- { id: '121410321', name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222', orderNum: '33,342' },
- { id: '121410324', name: '继续发送手机4', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan', num: '12,122,112', orderNum: '112,122,112' },
- { id: '121410325', name: '继续发送手机5', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo', num: '1000,000', orderNum: '200,000' },
+ {
+ id: '121410322',
+ name: 'ouid疲劳度2',
+ createTime: '2021/12/13 15:47:33',
+ creator: 'jiaojiao.diao',
+ num: 198,
+ orderNum: '122'
+ },
+ {
+ id: '121410323',
+ name: '继续发送手机3',
+ createTime: '2021/12/13 15:36:42',
+ creator: 'nan.run',
+ num: 1232,
+ orderNum: '1332'
+ },
+ {
+ id: '121410321',
+ name: '手机号优先继续发送1',
+ createTime: '2021/12/14 10:19:02',
+ creator: 'liyuan.meng',
+ num: 12222,
+ orderNum: '33342'
+ },
+ {
+ id: '121410324',
+ name: '继续发送手机4',
+ createTime: '2021/12/13 11:14:40',
+ creator: 'xiaotong.fan',
+ num: 12122112,
+ orderNum: 112122112
+ },
+ {
+ id: '121410325',
+ name: '继续发送手机5',
+ createTime: '2021/12/13 11:03:05',
+ creator: 'zhenxiao.guo',
+ num: 1000000,
+ orderNum: 200000
+ },
...new Array(50).fill(1).map((item, index) => (
- { id: `${121410327 + index}`, name: `手机号优先继续发送${index}`, createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222', orderNum: '33,342' }
+ {
+ id: `${121410327 + index}`,
+ name: `手机号优先继续发送${index}`,
+ createTime: '2021/12/14 10:19:02',
+ creator: 'liyuan.meng',
+ num: '12,222',
+ orderNum: '33,342'
+ }
))
];
const columns = [
- {
- title: '活动ID',
- dataIndex: 'id',
- sortable: true,
- sorter: (a, b, sortParams) => {
- if (sortParams.sortBy === 'ASC') {
- return Number(a.id) - Number(b.id);
- }
- if (sortParams.sortBy === 'DESC') {
- return Number(b.id) - Number(a.id)
- }
- return 0
+ {
+ title: '活动ID',
+ dataIndex: 'id',
+ sortable: true,
+ sorter: (a, b, sortParams) => {
+ if (sortParams.sortBy === 'ASC') {
+ return Number(a.id) - Number(b.id);
}
- },
- {
- title: '活动名称',
- dataIndex: 'name',
- sortable: true,
- sorter: (a, b, sortParams) => {
- if (sortParams.sortBy === 'ASC') {
- return a.name.localeCompare(b.name);
- }
- if (sortParams.sortBy === 'DESC') {
- return b.name.localeCompare(a.name);
- }
- return 0
+ if (sortParams.sortBy === 'DESC') {
+ return Number(b.id) - Number(a.id)
+ }
+ return 0
+ }
+ },
+ {
+ title: '活动名称',
+ dataIndex: 'name',
+ sortable: true,
+ sorter: (a, b, sortParams) => {
+ if (sortParams.sortBy === 'ASC') {
+ return a.name.localeCompare(b.name);
+ }
+ if (sortParams.sortBy === 'DESC') {
+ return b.name.localeCompare(a.name);
}
- },
- { title: '创建时间', dataIndex: 'createTime' },
- { title: '人数', dataIndex: 'num', align: 'right' },
- { title: '创建人', dataIndex: 'creator' }
+ return 0
+ }
+ },
+ {
+ title: '创建时间', dataIndex: 'createTime', render: val => {
+ return
+ }
+ },
+ {
+ title: '人数',
+ dataIndex: 'num',
+ align: 'right',
+ render: val =>
+ },
+ { title: '创建人', dataIndex: 'creator' }
];
export default function CTableDemo() {
diff --git a/src/components/c-table/demos/sort-store.md b/src/components/c-table/demos/sort-store.md
index 65193bc56..b20748c05 100644
--- a/src/components/c-table/demos/sort-store.md
+++ b/src/components/c-table/demos/sort-store.md
@@ -14,7 +14,7 @@ import React from 'react';
import { CTable, Tooltip, Icon } from 'cloud-react';
const data = new Array(50).fill(1).map((item, index) => (
- { id: 121410327 + index, name: `手机号优先继续发送${index}`, createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222', orderNum: '33,342' }
+ { id: 121410327 + index, name: `手机号优先继续发送${index}`, createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: 12222, orderNum: '33,342' }
))
const columns = [
@@ -35,9 +35,13 @@ const columns = [
sortable: true,
width: 300
},
- { title: '创建时间', dataIndex: 'createTime', sortable: true, width: 200 },
{
- title: '人数',
+ title: '创建时间', dataIndex: 'createTime', width: 200, render: val => {
+ return
+ }
+ },
+ {
+ title: '金额',
dataIndex: 'num',
align: 'right',
sortable: true,
@@ -45,6 +49,7 @@ const columns = [
titleTooltipConfig: {
content: '提示信息'
},
+ render: val =>
},
{
title: '订单数',
diff --git a/src/components/c-table/demos/sort-with-page.md b/src/components/c-table/demos/sort-with-page.md
index 0e857f92c..1161cfe3a 100644
--- a/src/components/c-table/demos/sort-with-page.md
+++ b/src/components/c-table/demos/sort-with-page.md
@@ -14,7 +14,7 @@ import React from 'react';
import { CTable, Tooltip, Icon } from 'cloud-react';
const data = new Array(50).fill(1).map((item, index) => (
- { id: 121410327 + index, name: `手机号优先继续发送${index}`, createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222', orderNum: '33,342' }
+ { id: 121410327 + index, name: `手机号优先继续发送${index}`, createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: 12222, orderNum: '33,342' }
))
const columns = [
@@ -34,7 +34,11 @@ const columns = [
sortable: true,
width: 300
},
- { title: '创建时间', dataIndex: 'createTime', sortable: true, width: 200 },
+ {
+ title: '创建时间', dataIndex: 'createTime', width: 200, render: val => {
+ return
+ }
+ },
{
title: '人数',
dataIndex: 'num',
@@ -44,6 +48,7 @@ const columns = [
titleTooltipConfig: {
content: '提示信息'
},
+ render: val =>
},
{
title: '订单数',
diff --git a/src/components/c-table/demos/sticky.md b/src/components/c-table/demos/sticky.md
index 730dbe7e1..2d6c54e0c 100644
--- a/src/components/c-table/demos/sticky.md
+++ b/src/components/c-table/demos/sticky.md
@@ -1,7 +1,5 @@
---
-order: 1
-title: CTable
-desc: 默认表格
+order: 1 title: CTable desc: 默认表格
---
```jsx
@@ -9,28 +7,44 @@ import React from 'react';
import { CTable } from 'cloud-react';
const data = new Array(10).fill(1).map((item, index) => (
- { id: 121410327 + index, name: '手机号优先继续发送1', createTime: '2021/12/14 10:19:02', creator: 'liyuan.meng', num: '12,222' }
+ {
+ id: 121410327 + index,
+ name: '手机号优先继续发送1',
+ createTime: '2021/12/14 10:19:02',
+ creator: 'liyuan.meng',
+ num: 12222
+ }
))
const columns = [
{ title: '活动ID', dataIndex: 'id', width: 130 },
{ title: '活动名称', dataIndex: 'name', width: 140 },
- { title: '创建时间', dataIndex: 'createTime', width: 140 },
- { title: '人数', dataIndex: 'num', align: 'right', width: 120 },
+ {
+ title: '创建时间', dataIndex: 'createTime', width: 140, render: val => {
+ return
+ }
+ },
+ {
+ title: '人数',
+ dataIndex: 'num',
+ align: 'right',
+ width: 120,
+ render: val =>
+ },
{ title: '创建人', dataIndex: 'creator', width: 130 }
];
export default function CTableDemo() {
- return (
-
- );
+ return (
+
+ );
}
```
diff --git a/src/components/c-table/demos/summary.md b/src/components/c-table/demos/summary.md
index f9ea26034..5f726961c 100644
--- a/src/components/c-table/demos/summary.md
+++ b/src/components/c-table/demos/summary.md
@@ -1,7 +1,5 @@
---
-order: 3
-title: CTable
-desc: 表尾合计
+order: 3 title: CTable desc: 表尾合计
---
```jsx
@@ -9,36 +7,36 @@ import React from 'react';
import { CTable } from 'cloud-react';
const data = [
- { id: '121410327', name: '手机号优先继续发送1', send: '12,22', fail: '22' },
- { id: '121410328', name: 'ouid疲劳度3', send: '12', fail: '3' },
- { id: '121410329', name: '继续发送手机1', send: '345', fail: '345' },
- { id: '121408294', name: '继续发送手机2', send: '100', fail: '2' },
- { id: '121407191', name: '继续发送手机3', send: '1,209', fail: '3' },
- { id: '121407192', name: '继续发送手机4', send: '120', fail: '4' },
+ { id: '121410327', name: '手机号优先继续发送1', send: 1222, fail: '22' },
+ { id: '121410328', name: 'ouid疲劳度3', send: 12, fail: 3 },
+ { id: '121410329', name: '继续发送手机1', send: 345, fail: 345 },
+ { id: '121408294', name: '继续发送手机2', send: '100', fail: 2 },
+ { id: '121407191', name: '继续发送手机3', send: 1209, fail: 3 },
+ { id: '121407192', name: '继续发送手机4', send: '120', fail: 4 },
];
const columns = [
- { title: '活动ID', dataIndex: 'id', align: 'left' },
- { title: '活动名称', dataIndex: 'name', align: 'left' },
- { title: '发送成功条数', dataIndex: 'send', align: 'right' },
- { title: '发送失败条数', dataIndex: 'fail', align: 'right' }
+ { title: '活动ID', dataIndex: 'id', align: 'left' },
+ { title: '活动名称', dataIndex: 'name', align: 'left' },
+ { title: '发送成功条数', dataIndex: 'send', align: 'right', render: val => },
+ { title: '发送失败条数', dataIndex: 'fail', align: 'right', render: val => }
];
const summaryData = [
{ index: 0, colSpan: 2, content: '合计' },
- { index: 2, colSpan: 1, content: '3,008', align: 'right' },
- { index: 3, colSpan: 1, content: '379', align: 'right' },
+ { index: 2, colSpan: 1, content: 3008, align: 'right', render: val => },
+ { index: 3, colSpan: 1, content: 379, align: 'right', render: val => },
];
export default function CTableDemo() {
- return (
-
- );
+ return (
+
+ );
}
```
diff --git a/src/components/c-table/demos/table-in-tab.md b/src/components/c-table/demos/table-in-tab.md
index 5ac2cdd2e..13876be93 100644
--- a/src/components/c-table/demos/table-in-tab.md
+++ b/src/components/c-table/demos/table-in-tab.md
@@ -1,7 +1,5 @@
---
-order: 7
-title: CTable
-desc: 单选
+order: 7 title: CTable desc: 单选
---
```jsx
@@ -17,7 +15,11 @@ const tableConfig = {
columnData: [
{ title: '活动ID', dataIndex: 'id' },
{ title: '活动名称', dataIndex: 'name' },
- { title: '创建时间', dataIndex: 'createTime' },
+ {
+ title: '创建时间', dataIndex: 'createTime', render: val => {
+ return
+ }
+ },
{ title: '创建人', dataIndex: 'creator' },
],
ajaxData: params => {
@@ -26,7 +28,10 @@ const tableConfig = {
));
return new Promise(resolve => {
setTimeout(() => {
- resolve({ totals: data.length, data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum))) });
+ resolve({
+ totals: data.length,
+ data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
+ });
}, 200)
})
},
@@ -44,7 +49,10 @@ const tableConfig = {
))
return new Promise(resolve => {
setTimeout(() => {
- resolve({ totals: data.length, data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum))) });
+ resolve({
+ totals: data.length,
+ data: JSON.parse(JSON.stringify(data.slice(params.pageSize * (params.pageNum - 1), params.pageSize * params.pageNum)))
+ });
}, 200)
})
},
diff --git a/src/components/c-table/index.js b/src/components/c-table/index.js
index cc9aa1779..4b0deb9fb 100644
--- a/src/components/c-table/index.js
+++ b/src/components/c-table/index.js
@@ -16,6 +16,7 @@ import {
isFirefox,
debounce,
hasCustomScroll,
+ getBtnNum, getScrollbarWidth,
} from './util';
import {
DRAG_ICON_SELECTOR,
@@ -162,12 +163,21 @@ class CTable extends Component {
};
resolveColumn = (columnData) => {
- return columnData.map((item) => ({
- render: (val, row) => ,
- ...item,
- show: true,
- align: item.type === NUMBER ? 'right' : item.align,
- }));
+ return columnData.map((item) => {
+ const align = item.type === NUMBER ? 'right' : item.align;
+ const btnNum = getBtnNum(item);
+ const colClassName =
+ align === 'right' && btnNum > 0 ? `padding-${btnNum}` : '';
+ return {
+ render: (val, row) => ,
+ ...item,
+ show: true,
+ align,
+ className: item.className
+ ? `${item.className} ${colClassName}`
+ : colClassName,
+ };
+ });
};
resolveOriginColumn = (columnData) => {
@@ -285,7 +295,7 @@ class CTable extends Component {
// fixedEles.pop();
fixedEles.reverse().forEach((ele, index) => {
if (index === 0) {
- Object.assign(ele.style, { right: this.hasScroll() ? '10px' : 0 });
+ Object.assign(ele.style, { right: this.hasScroll() ? getScrollbarWidth() : 0 });
} else {
const right = fixedColumn.slice(0, index).reduce(
(sum, item) => {
@@ -293,7 +303,7 @@ class CTable extends Component {
sum += item.width;
return sum;
},
- this.hasScroll() ? 10 : 0,
+ this.hasScroll() ? Number(getScrollbarWidth().replace('px', '')) : 0,
);
Object.assign(ele.style, {
right: `${right}px`,
@@ -809,7 +819,7 @@ class CTable extends Component {
{summaryData.map((item) => (
- {item.content || null}
+
))}
diff --git a/src/components/c-table/index.md b/src/components/c-table/index.md
index b8ce94a7d..663d5b067 100644
--- a/src/components/c-table/index.md
+++ b/src/components/c-table/index.md
@@ -170,6 +170,7 @@ this.tableRef.current.setColumn(columnData, isReloadGrid?);
| onCell | 为每个单元格设置自定义参数 Function(record, index) | function | - |
| minWidth | 列最小宽度（**该属性效果不流畅，可以给 columnData 中的每一项都设置 width 属性，可达到同样效果**） | number | - |
| filters | 配置表格列筛选项 [{ text: '男', value: 'male' }, { text: '女', value: 'female' }] | array | [] |
+| className | 给列设置类名 | string | '' |
| type | 列模板类型，可传值：数字类型-`NUMBER`、时间类型-`TIME`、时间范围类型-`TIME_RANGE`、单行文本类型-`TEXT`、多行文本类型-`MULTI_TEXT`、单行文本带链接-`LINK`、多行文本带链接-`MULTI_LINK`、标签类型-`TAG` | string | - |
| typeConfig | 搭配 type 使用，支持参数详见下表 ⬇️ | object | {} |
@@ -330,21 +331,27 @@ this.tableRef.current.setColumn(columnData, isReloadGrid?);
### 标准化表格-数值类型
+
### 标准化表格-时间类型
+
### 标准化表格-时间范围类型
+
### 标准化表格-文本类型
+
### 标准化表格-标签类型
+
### 标准化表格-使用列模板形式
+
### 解决方案
diff --git a/src/components/c-table/js/column.js b/src/components/c-table/js/column.js
index b2f44ed20..3c0c40817 100644
--- a/src/components/c-table/js/column.js
+++ b/src/components/c-table/js/column.js
@@ -208,19 +208,22 @@ export default class Column {
{this.renderTitle(item)}
- this.onSort(item, currentColumnItem)}
- >
-
-
-
+ {item.sortable && (
+ this.onSort(item, currentColumnItem)}
+ >
+
+
+
+ )}
{hasFilter && (
{
};
};
-export const hasCustomScroll = (useRootWindow) => {
+export const getScrollbarWidth = (useRootWindow) => {
const _window = useRootWindow ? getRootWindow() : window;
const bodyEle = document.querySelector('body');
return _window
.getComputedStyle(bodyEle, '::-webkit-scrollbar')
- .width.includes('px');
+ .width;
};
+export const hasCustomScroll = (useRootWindow) => getScrollbarWidth(useRootWindow)?.includes('px');
+
export const getTrEle = (targetEle) => {
if (targetEle && !targetEle?.hasAttribute('data-row-key')) {
return getTrEle(targetEle?.parentElement);
@@ -197,3 +199,32 @@ export const getTextWidth = (text, fontSize = '14px') => {
return Math.ceil(parseFloat(width));
};
+
+export const getBtnNum = (columnItem) => {
+ const paddingConfig = {
+ tooltip:
+ columnItem?.titleTooltipConfig?.content
+ && columnItem?.titleTooltipAlign !== 'left',
+ sort: !!columnItem?.sortable,
+ filter: !!columnItem?.filters?.length,
+ };
+ const btnNum = Object.keys(paddingConfig)?.filter(
+ (key) => paddingConfig[key],
+ )?.length;
+ if (btnNum === 1) {
+ if (paddingConfig.filter) {
+ return 34;
+ }
+ return 32;
+ }
+ if (btnNum === 2) {
+ if (paddingConfig.tooltip && paddingConfig.sort) {
+ return 52;
+ }
+ return 54;
+ }
+ if (btnNum === 3) {
+ return 74;
+ }
+ return 0;
+};