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.
The npm package react-datasheet-grid-teams receives a total of 6 weekly downloads. As such, react-datasheet-grid-teams popularity was classified as not popular.
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.
Research
/Security News
The Socket Threat Research Team uncovered a coordinated campaign that floods the Chrome Web Store with 131 rebranded clones of a WhatsApp Web automation extension to spam Brazilian users.
Security News
ENISA’s 2025 Threat Landscape report highlights how AI is reshaping cyber attacks, driving phishing, model poisoning, and software supply chain risks.
Security News
Evan You announces Vite+, a commercial, Rust-powered toolchain built on the Vite ecosystem to unify JavaScript development and fund open source.