ke-gantt
v1.0.1
Published
```javascript import React from 'react';
Downloads
4
Readme
代码示例
import React from 'react';
import Gantt from 'ke-gantt';
import 'ke-gantt/dist/ke-gantt.css';
const data = [
{
id: 1,
title: 'a',
date_distribution: [
{
start_date: '2020-9-1',
end_date: '2020-9-3',
id: 1,
},
],
},
{
id: 2,
title: 'b',
date_distribution: [],
},
];
export default class Example extends React.Component {
state = {
data: [
{
id: 1,
title: 'a',
date_distribution: [
{
title: 'hahahah',
start_date: '2020-9-1',
end_date: '2020-9-3',
id: 1,
},
],
},
{
id: 2,
title: 'b',
date_distribution: [],
},
],
};
columns = [
{
title: '名称',
dataIndex: 'title',
fixed: 'left',
},
];
range = {
dataIndex: ['start_date', 'end_date'],
allowCreate: true,
allowUpdate: true,
getTooltipProps: (record, item) => {
const { title } = item;
return {
title,
};
},
render: (record, item = {}) => {
const { title } = item;
return <div style={{ height: '100%', background: '#52c41a' }}>{title}</div>;
},
onChange: (value, record, item) => {
console.log('change', value, record, item);
},
};
render() {
const { data } = this.state;
return (
<Gantt
rowKey="id"
columns={this.columns}
dataSource={data}
pagination={false}
gantt={{
draggable: true,
dayWidth: 60,
dateRange: ['2020-8-10', '2020-9-10'],
dataIndex: 'date_distribution',
itemKey: 'id',
range: this.range,
}}
/>
);
}
}