react-datasheet-grid-teams
Advanced tools
npm i react-datasheet-grid-teams
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'}
/>
FAQs
An Excel-like React component to create beautiful spreadsheets.
We found that react-datasheet-grid-teams demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.
Security News
Ruby's creator Matz assumes control of RubyGems and Bundler repositories while former maintainers agree to step back and transfer all rights to end the dispute.
Research
/Security News
Socket researchers found 10 typosquatted npm packages that auto-run on install, show fake CAPTCHAs, fingerprint by IP, and deploy a credential stealer.