react-datasheet-grid-teams
v4.19.1
Published
An Excel-like React component to create beautiful spreadsheets.
Downloads
45
Maintainers
thy0-0Readme
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'}
/>