4.19.1 • Published 2 months ago
react-datasheet-grid-teams v4.19.1
react-datasheet-grid-teams
Install
npm i react-datasheet-grid-teamsUsage
import {
DataSheetGrid,
DynamicDataSheetGrid,
checkboxColumn,
textColumn,
keyColumn, columnsBuild
} from 'react-datasheet-grid-teams/dist';
import 'react-datasheet-grid-teams/dist/style.css'
const [data, setData] = useState(Array.from(
{
length: 4,
},
(_, key) => ({
key,
text: '测试文字',
select_multiple_option: [4],
button: [{
value: '按钮1',
onClick: () => {
alert('点击了第' + (key + 1) + '行的[按钮1]');
},
}, {
value: '按钮2',
style: {
borderRadius: '5px',
color: 'white',
backgroundColor: '#007AEB',
padding: '0 16px',
lineHeight: '28px',
fontSize: '12px',
height: '28px',
},
render: ({ disabled, value, style, className }) => {
return <span style={{
...style,
...(disabled ? {
backgroundColor: '#888'
} : {})
}} className={className} onClick={() => {
if (!disabled) {
alert(`点击了第${key + 1}行的[${value}]`);
}
}}>{value}</span>
}
}],
select: 4,
select2: 1,
number: 0.1,
selectOptions: {
select: async (val) => {
console.log('onSearch', val);
await sleep();
return [
{ label: '张三', tag: "5566", value: '3', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
{ label: '李四', value: '4', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
{ label: '王五', value: '5', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
{ label: '赵六', value: '6', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
]
},
select_multiple_option: [{
value: '1',
label: '选项一',
}, {
value: '2',
label: '选项二',
}, {
value: '3',
label: '选项三',
}],
user10: async (val) => {
console.log('onSearch', val);
await sleep();
return [
{ label: '张三', value: '3', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
{ label: '李四', value: '4', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
{ label: '王五', value: '5', avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
{ label: '赵六', value: '6', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
]
}
},
tags: ['foo', 'tag'],
}),
))
const disabled = [0, 3];
const disabledCol = true;
const columns = [
{
title: '',
key: 'checkbox',
type: 'checkbox',
maxWidth: 80,
minWidth: 80,
align: 'center',
defaultValue: true,
},
{
title: '默认文本输入',
minWidth: 160,
key: 'text',
// disabled: disabled,
},
// {
// title: '多行输入',
// // disabled: disabled,
// type: 'text_multiple',
// key: '666'
// // disabled: true
// },
{
title: '标题右置',
align: 'right',
minWidth: 160,
// disabled: disabled,
},
{
title: '标题居中',
align: 'center',
minWidth: 160,
// disabled: disabled,
},
{
title: '文本输入文本（禁用整列）',
align: 'left',
minWidth: 240,
key: 'textColDisable',
disabled: disabledCol,
},
// {
// title: '单选',
// type: 'radio',
// align: 'left',
// disabled: disabled,
// },
// {
// title: '时间',
// type: 'date',
// key: 'date',
// disabled: disabled,
// defaultValue: Date.now(),
// },
{
disabled: disabled,
title: '数字',
type: 'number',
key: 'number',
},
// {
// disabled: disabled,
// title: '数字（自定义的错误文案）',
// type: 'number',
// key: 'number1',
// minWidth: 240,
// error: '自定义的错误文案'
// },
{
title: '多选',
disabled: disabled,
key: 'select_multiple_option',
type: 'select_multiple',
isSkip: "https://www.baidu.com",
// options: [
// { label: '张三', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: 3, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
// { label: '赵六', value: 6, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
// { label: '王五1', value: 7, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
// { label: '赵六1', value: 8, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
// ],
options: async (val) => {
console.log('onSearch', val);
await sleep();
if (val) {
return [
{ label: '张三', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: 3, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '赵六', value: 6, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '王五1', value: 7, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '赵六1', value: 8, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
]
} else {
return [
{ label: '张三', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: 3, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '李四', value: 4, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '王五', value: 5, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '赵六', value: 6, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
]
}
},
// options: [{
// value: '1',
// label: '选项一',
// // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
// // avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
// }, {
// value: '2',
// label: '选项二',
// // tag: [{ text: "55613236", color: "red" }],
// // avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
// }, {
// value: '3',
// label: '选项三',
// // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
// // avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
// }]
},
{
disabled: disabled,
title: '单选框',
type: 'select',
key: 'select',
isSkip: "https://www.baidu.com",
// dataLinkage: true,
options: async (val) => {
console.log('onSearch', val);
await sleep();
if (val) {
return [
{ label: '张三', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: 3, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '赵六', value: 6, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '王五1', value: 7, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '李四', value: 4, avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
{ label: '赵六1', value: 8, avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
]
} else {
return [
{ label: '张三二纺机而你呢张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人张三二纺机而你呢家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人家你可能人福科技呢开金额为i卫计局嗯可能问客服你看我男妇科人家呢客服呢看你看人呢付款呢可能人家福建姐姐姐夫减肥减肥减肥减肥经济法减肥减肥减肥减肥减肥经济法减肥减肥减肥经济法减肥减肥姐姐房间你看人可能热客服呢热裤男妇科男妇科男妇科玖恩开房间呢可能付款人复垦烤肉饭呢可能妇科让你看吩咐金额你呢哦麻烦了妮妮v呢女卡农讹你呢看女警嗯看到开镜女款的你房间号v任课教师看见你哭v几男几女缝纫机', tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }], value: '3', avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '李四', value: 4, avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' },
{ label: '王五', value: 5, avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
{ label: '赵六', value: 6, avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png' },
]
}
},
// options: [{
// value: '1',
// label: '选项一',
// // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
// avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
// }, {
// value: '2',
// label: '选项二',
// // tag: [{ text: "55613236", color: "red" }],
// avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
// }, {
// value: '3',
// label: '选项三',
// // tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
// avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
// }]
},
{
disabled: disabled,
title: '单选框',
type: 'select',
key: 'select2',
isSkip: "https://www.baidu.com",
// dataLinkage: true,
options: [{
value: '1',
label: '选项一',
// tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
}, {
value: '2',
label: '选项二',
// tag: [{ text: "55613236", color: "red" }],
avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png'
}, {
value: '3',
label: '选项三',
// tag: [{ text: "55613236", color: "red" }, { text: "55613236", color: "red" }],
avatar: '331dc7e65cdc5674c139bbb1f68f5940738757a90581387891c9e4c5678ca1920ed669d1/2.png'
}]
},
// {
// disabled: disabled,
// title: '标签',
// key: 'tags',
// type: 'tag',
// },
// {
// title: '人员',
// disabled: disabled,
// key: 'user10',
// type: 'user',
// onSearch: async (val) => {
// console.log('onSearch', val);
// await sleep();
// return [
// { label: '张三', value: '3' },
// { label: '李四', value: '4' },
// { label: '王五', value: '5' },
// { label: '赵六', value: '6' },
// ]
// }
// },
// {
// title: '按钮',
// disabled: disabled,
// type: 'button',
// key: 'button',
// minWidth: 200
// },
{
title: '多行输入',
// disabled: disabled,
type: 'text_multiple',
key: '6668',
// wordLimit: 15,
// disabled: true
},
{
title: '多行输入2',
// disabled: disabled,
type: 'text_multiple',
key: '66682',
wordLimit: 15,
// disabled: true
},
{
title: '多行输入3',
// disabled: disabled,
type: 'text_multiple',
key: '66683',
// wordLimit: 15,
// disabled: true
},
// {
// title: '默认文本输入',
// minWidth: 160,
// key: 'text2',
// // disabled: disabled,
// },
]
<DynamicDataSheetGrid
value={data}
onChange={onChange}
columns={columnsBuild(columns)}
height={400}
rowHeight={80}
gutterColumn={false}
addRowsComponent={false}
// File web domain
publicPath={'url'}
/>4.19.1
2 months ago
4.19.0
3 months ago
4.18.9
6 months ago
4.18.5
7 months ago
4.18.6
7 months ago
4.18.7
7 months ago
4.18.8
7 months ago
4.18.1
8 months ago
4.18.2
8 months ago
4.18.3
8 months ago
4.18.4
8 months ago
4.18.0
8 months ago
4.17.9
8 months ago
4.17.8
8 months ago
4.17.7
8 months ago
4.17.6
8 months ago
4.17.5
8 months ago
4.17.4
8 months ago
4.17.3
8 months ago
4.17.2
8 months ago
4.17.1
8 months ago
4.16.9
9 months ago
4.16.8
9 months ago
4.16.7
9 months ago
4.16.6
9 months ago
4.16.5
9 months ago
4.16.4
9 months ago
4.16.3
9 months ago
4.16.2
9 months ago
4.16.1
9 months ago
4.16.0
9 months ago
4.15.9
10 months ago
4.15.8
10 months ago
4.15.7
10 months ago
4.15.6
10 months ago
4.15.5
10 months ago
4.15.4
10 months ago
4.15.3
10 months ago
4.15.2
10 months ago
4.15.1
11 months ago
4.15.0
11 months ago
4.14.0
11 months ago
4.13.0
11 months ago
4.12.0
11 months ago
4.11.0
11 months ago