Row spanning in React Grid component
16 Feb 202424 minutes to read
The grid provides an option to span row cells, allowing you to merge two or more cells in a row into a single cell. This feature can be useful in scenarios where you want to display information that spans across multiple rows, but want to avoid repeating the same information in each row.
To achieve this, You need to define the rowSpan attribute to span cells in the queryCellInfo event. The rowSpan attribute is used to specify the number of rows that the current cell should span.
The queryCellInfo event is triggered for each cell in the grid, and allows you to customize the cells in the grid. By handling this event, you can set the rowSpan attribute for a cell to achieve row spanning.
In the following demo, Davolio cell is spanned to two rows in the EmployeeName column. Also Grid supports the spanning of rows and columns for same cells. Lunch Break cell is spanned to two rows and three columns in the 1:00 column.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { columnSpanData } from './datasource';
function App() {
let grid;
const queryCellInfoEvent = (args) => {
const col = args.column;
const data = args.data;
switch (data.EmployeeID) {
case 10001:
if (col.field === '9:00' || col.field === '2:30' || col.field === '4:30') {
args.colSpan = 2;
}
else if (col.field === '11:00') {
args.colSpan = 3;
}
else if (col.field === 'EmployeeName') {
args.rowSpan = 2;
}
else if (col.field === '1:00') {
args.colSpan = 3;
args.rowSpan = (grid && grid.currentViewData.length) || 0;
}
break;
case 10002:
if (col.field === '9:30' || col.field === '2:30' ||
col.field === '4:30') {
args.colSpan = 3;
}
else if (col.field === '11:00') {
args.colSpan = 4;
}
break;
case 10003:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
}
else if (col.field === '10:30' || col.field === '3:30' ||
col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10004:
if (col.field === '9:00') {
args.colSpan = 3;
}
else if (col.field === '11:00') {
args.colSpan = 4;
}
else if (col.field === '4:00' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10005:
if (col.field === '9:00') {
args.colSpan = 4;
}
else if (col.field === '11:30') {
args.colSpan = 3;
}
else if (col.field === '3:30' || col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10006:
if (col.field === '9:00' || col.field === '4:30' ||
col.field === '2:30' || col.field === '3:30') {
args.colSpan = 2;
}
else if (col.field === '10:00' || col.field === '11:30') {
args.colSpan = 3;
}
break;
case 10007:
if (col.field === '9:00' || col.field === '3:00' || col.field === '10:30') {
args.colSpan = 2;
}
else if (col.field === '11:30' || col.field === '4:00') {
args.colSpan = 3;
}
break;
case 10008:
if (col.field === '9:00' || col.field === '10:30' || col.field === '2:30') {
args.colSpan = 3;
}
else if (col.field === '4:00') {
args.colSpan = 2;
}
break;
case 10009:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
}
else if (col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 100010:
if (col.field === '9:00' || col.field === '2:30' ||
col.field === '4:00' || col.field === '11:30') {
args.colSpan = 3;
}
else if (col.field === '10:30') {
args.colSpan = 2;
}
break;
}
};
return (<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={columnSpanData} ref={g => grid = g} queryCellInfo={queryCellInfoEvent} allowTextWrap={true} height='auto' width='auto' gridLines='Both'>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='150' textAlign='Right'/>
<ColumnDirective field='EmployeeName' headerText='Employee Name' width='200'/>
<ColumnDirective field='9:00' headerText='9:00 AM' width='120'/>
<ColumnDirective field='9:30' headerText='9:30 AM' width='120'/>
<ColumnDirective field='10:00' headerText='10:00 AM' width='120'/>
<ColumnDirective field='10:30' headerText='10:30 AM' width='120'/>
<ColumnDirective field='11:00' headerText='11:00 AM' width='120'/>
<ColumnDirective field='11:30' headerText='11:30 AM' width='120'/>
<ColumnDirective field='12:00' headerText='12:00 PM' width='120'/>
<ColumnDirective field='12:30' headerText='12:30 PM' width='120'/>
<ColumnDirective field='1:00' headerText='1:00 PM' textAlign='Center' width='120'/>
<ColumnDirective field='1:30' headerText='1:30 PM' width='120'/>
<ColumnDirective field='2:00' headerText='2:00 PM' width='120'/>
<ColumnDirective field='2:30' headerText='2:30 PM' width='120'/>
<ColumnDirective field='3:00' headerText='3:00 PM' width='120'/>
<ColumnDirective field='3:30' headerText='3:30 PM' width='120'/>
<ColumnDirective field='4:00' headerText='4:00 PM' width='120'/>
<ColumnDirective field='4:30' headerText='4:30 PM' width='120'/>
<ColumnDirective field='5:00' headerText='5:00 PM' width='120'/>
</ColumnsDirective>
</GridComponent>
</div>
</div>);
}
;
export default App;import { Column, ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import { QueryCellInfoEventArgs } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { IColumnSpanDataType } from './colspanDataType';
import { columnSpanData } from './datasource';
function App() {
let grid: Grid | null;
const queryCellInfoEvent = (args: QueryCellInfoEventArgs) => {
const col: Column = args.column as Column;
const data: IColumnSpanDataType = args.data as IColumnSpanDataType;
switch (data.EmployeeID) {
case 10001:
if (col.field === '9:00' || col.field === '2:30' || col.field === '4:30') {
args.colSpan = 2;
} else if (col.field === '11:00') {
args.colSpan = 3;
} else if (col.field === 'EmployeeName') {
args.rowSpan = 2;
} else if (col.field === '1:00') {
args.colSpan = 3;
args.rowSpan = (grid && grid.currentViewData.length) || 0;
}
break;
case 10002:
if (col.field === '9:30' || col.field === '2:30' ||
col.field === '4:30') {
args.colSpan = 3;
} else if (col.field === '11:00') {
args.colSpan = 4;
}
break;
case 10003:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '10:30' || col.field === '3:30' ||
col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10004:
if (col.field === '9:00') {
args.colSpan = 3;
} else if (col.field === '11:00') {
args.colSpan = 4;
} else if (col.field === '4:00' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10005:
if (col.field === '9:00') {
args.colSpan = 4;
} else if (col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '3:30' || col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 10006:
if (col.field === '9:00' || col.field === '4:30' ||
col.field === '2:30' || col.field === '3:30') {
args.colSpan = 2;
} else if (col.field === '10:00' || col.field === '11:30') {
args.colSpan = 3;
}
break;
case 10007:
if (col.field === '9:00' || col.field === '3:00' || col.field === '10:30') {
args.colSpan = 2;
} else if (col.field === '11:30' || col.field === '4:00') {
args.colSpan = 3;
}
break;
case 10008:
if (col.field === '9:00' || col.field === '10:30' || col.field === '2:30') {
args.colSpan = 3;
} else if (col.field === '4:00') {
args.colSpan = 2;
}
break;
case 10009:
if (col.field === '9:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '4:30' || col.field === '2:30') {
args.colSpan = 2;
}
break;
case 100010:
if (col.field === '9:00' || col.field === '2:30' ||
col.field === '4:00' || col.field === '11:30') {
args.colSpan = 3;
} else if (col.field === '10:30') {
args.colSpan = 2;
}
break;
}
};
return (
<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={columnSpanData} ref={g => grid = g} queryCellInfo={queryCellInfoEvent} allowTextWrap={true} height='auto' width='auto' gridLines='Both' >
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='150' textAlign='Right' />
<ColumnDirective field='EmployeeName' headerText='Employee Name' width='200' />
<ColumnDirective field='9:00' headerText='9:00 AM' width='120' />
<ColumnDirective field='9:30' headerText='9:30 AM' width='120' />
<ColumnDirective field='10:00' headerText='10:00 AM' width='120' />
<ColumnDirective field='10:30' headerText='10:30 AM' width='120' />
<ColumnDirective field='11:00' headerText='11:00 AM' width='120' />
<ColumnDirective field='11:30' headerText='11:30 AM' width='120' />
<ColumnDirective field='12:00' headerText='12:00 PM' width='120' />
<ColumnDirective field='12:30' headerText='12:30 PM' width='120' />
<ColumnDirective field='1:00' headerText='1:00 PM' textAlign='Center' width='120' />
<ColumnDirective field='1:30' headerText='1:30 PM' width='120' />
<ColumnDirective field='2:00' headerText='2:00 PM' width='120' />
<ColumnDirective field='2:30' headerText='2:30 PM' width='120' />
<ColumnDirective field='3:00' headerText='3:00 PM' width='120' />
<ColumnDirective field='3:30' headerText='3:30 PM' width='120' />
<ColumnDirective field='4:00' headerText='4:00 PM' width='120' />
<ColumnDirective field='4:30' headerText='4:30 PM' width='120' />
<ColumnDirective field='5:00' headerText='5:00 PM' width='120' />
</ColumnsDirective>
</GridComponent>
</div>
</div>)
};
export default App;export {};export interface IColumnSpanDataType {
EmployeeID: number;
EmployeeName: string;
'9:00': string;
'9:30': string;
'10:00': string;
'10:30': string;
'11:00': string;
'11:30': string;
'12:00': string;
'12:30': string;
'1:00': string;
'1:30': string;
'2:00': string;
'2:30': string;
'3:00': string;
'3:30': string;
'4:00': string;
'4:30': string;
'5:00': string;
}export let columnSpanData = [
{
EmployeeID: 10001,
EmployeeName: 'Davolio',
'9:00': 'Analysis Tasks',
'9:30': 'Analysis Tasks',
'10:00': 'Team Meeting',
'10:30': 'Testing',
'11:00': 'Development',
'11:30': 'Development',
'12:00': 'Development',
'12:30': 'Support',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Testing',
'3:00': 'Testing',
'3:30': 'Development',
'4:00': 'Conference',
'4:30': 'Team Meeting',
'5:00': 'Team Meeting'
},
{
EmployeeID: 10002,
EmployeeName: 'Buchanan',
'9:00': 'Task Assign',
'9:30': 'Support',
'10:00': 'Support',
'10:30': 'Support',
'11:00': 'Testing',
'11:30': 'Testing',
'12:00': 'Testing',
'12:30': 'Testing',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Check Mail',
'4:00': 'Check Mail',
'4:30': 'Team Meeting',
'5:00': 'Team Meeting'
},
{
EmployeeID: 10003,
EmployeeName: 'Fuller',
'9:00': 'Check Mail',
'9:30': 'Check Mail',
'10:00': 'Check Mail',
'10:30': 'Analysis Tasks',
'11:00': 'Analysis Tasks',
'11:30': 'Support',
'12:00': 'Support',
'12:30': 'Support',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Team Meeting',
'4:00': 'Team Meeting',
'4:30': 'Development',
'5:00': 'Development'
},
{
EmployeeID: 10004,
EmployeeName: 'Leverling',
'9:00': 'Testing',
'9:30': 'Check Mail',
'10:00': 'Check Mail',
'10:30': 'Support',
'11:00': 'Testing',
'11:30': 'Testing',
'12:00': 'Testing',
'12:30': 'Testing',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Check Mail',
'4:00': 'Conference',
'4:30': 'Conference',
'5:00': 'Team Meeting'
},
{
EmployeeID: 10005,
EmployeeName: 'Peacock',
'9:00': 'Task Assign',
'9:30': 'Task Assign',
'10:00': 'Task Assign',
'10:30': 'Task Assign',
'11:00': 'Check Mail',
'11:30': 'Support',
'12:00': 'Support',
'12:30': 'Support',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Team Meeting',
'4:00': 'Team Meeting',
'4:30': 'Testing',
'5:00': 'Testing'
},
{
EmployeeID: 10006,
EmployeeName: 'Janet',
'9:00': 'Testing',
'9:30': 'Testing',
'10:00': 'Support',
'10:30': 'Support',
'11:00': 'Support',
'11:30': 'Team Meeting',
'12:00': 'Team Meeting',
'12:30': 'Team Meeting',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Team Meeting',
'4:00': 'Team Meeting',
'4:30': 'Development',
'5:00': 'Development'
},
{
EmployeeID: 10007,
EmployeeName: 'Suyama',
'9:00': 'Analysis Tasks',
'9:30': 'Analysis Tasks',
'10:00': 'Testing',
'10:30': 'Development',
'11:00': 'Development',
'11:30': 'Testing',
'12:00': 'Testing',
'12:30': 'Testing',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Support',
'3:00': 'Build',
'3:30': 'Build',
'4:00': 'Check Mail',
'4:30': 'Check Mail',
'5:00': 'Check Mail'
},
{
EmployeeID: 10008,
EmployeeName: 'Robert',
'9:00': 'Task Assign',
'9:30': 'Task Assign',
'10:00': 'Task Assign',
'10:30': 'Development',
'11:00': 'Development',
'11:30': 'Development',
'12:00': 'Testing',
'12:30': 'Support',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Check Mail',
'3:00': 'Check Mail',
'3:30': 'Check Mail',
'4:00': 'Team Meeting',
'4:30': 'Team Meeting',
'5:00': 'Build'
},
{
EmployeeID: 10009,
EmployeeName: 'Andrew',
'9:00': 'Check Mail',
'9:30': 'Team Meeting',
'10:00': 'Team Meeting',
'10:30': 'Support',
'11:00': 'Testing',
'11:30': 'Development',
'12:00': 'Development',
'12:30': 'Development',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Check Mail',
'3:00': 'Check Mail',
'3:30': 'Check Mail',
'4:00': 'Team Meeting',
'4:30': 'Development',
'5:00': 'Development'
},
{
EmployeeID: 10010,
EmployeeName: 'Michael',
'9:00': 'Task Assign',
'9:30': 'Task Assign',
'10:00': 'Task Assign',
'10:30': 'Analysis Tasks',
'11:00': 'Analysis Tasks',
'11:30': 'Development',
'12:00': 'Development',
'12:30': 'Development',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Testing',
'3:00': 'Testing',
'3:30': 'Testing',
'4:00': 'Build',
'4:30': 'Build',
'5:00': 'Build'
}
];import {IColumnSpanDataType} from './ColumnSpanDataType';
export let columnSpanData: IColumnSpanDataType[] = [
{
EmployeeID: 10001,
EmployeeName: 'Davolio',
'9:00': 'Analysis Tasks',
'9:30': 'Analysis Tasks',
'10:00': 'Team Meeting',
'10:30': 'Testing',
'11:00': 'Development',
'11:30': 'Development',
'12:00': 'Development',
'12:30': 'Support',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Testing',
'3:00': 'Testing',
'3:30': 'Development',
'4:00': 'Conference',
'4:30': 'Team Meeting',
'5:00': 'Team Meeting'
},
{
EmployeeID: 10002,
EmployeeName: 'Buchanan',
'9:00': 'Task Assign',
'9:30': 'Support',
'10:00': 'Support',
'10:30': 'Support',
'11:00': 'Testing',
'11:30': 'Testing',
'12:00': 'Testing',
'12:30': 'Testing',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Check Mail',
'4:00': 'Check Mail',
'4:30': 'Team Meeting',
'5:00': 'Team Meeting'
},
{
EmployeeID: 10003,
EmployeeName: 'Fuller',
'9:00': 'Check Mail',
'9:30': 'Check Mail',
'10:00': 'Check Mail',
'10:30': 'Analysis Tasks',
'11:00': 'Analysis Tasks',
'11:30': 'Support',
'12:00': 'Support',
'12:30': 'Support',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Team Meeting',
'4:00': 'Team Meeting',
'4:30': 'Development',
'5:00': 'Development'
},
{
EmployeeID: 10004,
EmployeeName: 'Leverling',
'9:00': 'Testing',
'9:30': 'Check Mail',
'10:00': 'Check Mail',
'10:30': 'Support',
'11:00': 'Testing',
'11:30': 'Testing',
'12:00': 'Testing',
'12:30': 'Testing',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Check Mail',
'4:00': 'Conference',
'4:30': 'Conference',
'5:00': 'Team Meeting'
},
{
EmployeeID: 10005,
EmployeeName: 'Peacock',
'9:00': 'Task Assign',
'9:30': 'Task Assign',
'10:00': 'Task Assign',
'10:30': 'Task Assign',
'11:00': 'Check Mail',
'11:30': 'Support',
'12:00': 'Support',
'12:30': 'Support',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Team Meeting',
'4:00': 'Team Meeting',
'4:30': 'Testing',
'5:00': 'Testing'
},
{
EmployeeID: 10006,
EmployeeName: 'Janet',
'9:00': 'Testing',
'9:30': 'Testing',
'10:00': 'Support',
'10:30': 'Support',
'11:00': 'Support',
'11:30': 'Team Meeting',
'12:00': 'Team Meeting',
'12:30': 'Team Meeting',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Development',
'3:00': 'Development',
'3:30': 'Team Meeting',
'4:00': 'Team Meeting',
'4:30': 'Development',
'5:00': 'Development'
},
{
EmployeeID: 10007,
EmployeeName: 'Suyama',
'9:00': 'Analysis Tasks',
'9:30': 'Analysis Tasks',
'10:00': 'Testing',
'10:30': 'Development',
'11:00': 'Development',
'11:30': 'Testing',
'12:00': 'Testing',
'12:30': 'Testing',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Support',
'3:00': 'Build',
'3:30': 'Build',
'4:00': 'Check Mail',
'4:30': 'Check Mail',
'5:00': 'Check Mail'
},
{
EmployeeID: 10008,
EmployeeName: 'Robert',
'9:00': 'Task Assign',
'9:30': 'Task Assign',
'10:00': 'Task Assign',
'10:30': 'Development',
'11:00': 'Development',
'11:30': 'Development',
'12:00': 'Testing',
'12:30': 'Support',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Check Mail',
'3:00': 'Check Mail',
'3:30': 'Check Mail',
'4:00': 'Team Meeting',
'4:30': 'Team Meeting',
'5:00': 'Build'
},
{
EmployeeID: 10009,
EmployeeName: 'Andrew',
'9:00': 'Check Mail',
'9:30': 'Team Meeting',
'10:00': 'Team Meeting',
'10:30': 'Support',
'11:00': 'Testing',
'11:30': 'Development',
'12:00': 'Development',
'12:30': 'Development',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Check Mail',
'3:00': 'Check Mail',
'3:30': 'Check Mail',
'4:00': 'Team Meeting',
'4:30': 'Development',
'5:00': 'Development'
},
{
EmployeeID: 10010,
EmployeeName: 'Michael',
'9:00': 'Task Assign',
'9:30': 'Task Assign',
'10:00': 'Task Assign',
'10:30': 'Analysis Tasks',
'11:00': 'Analysis Tasks',
'11:30': 'Development',
'12:00': 'Development',
'12:30': 'Development',
'1:00': 'Lunch Break',
'1:30': 'Lunch Break',
'2:00': 'Lunch Break',
'2:30': 'Testing',
'3:00': 'Testing',
'3:30': 'Testing',
'4:00': 'Build',
'4:30': 'Build',
'5:00': 'Build'
}
];
- To disable the spanning for particular grid page, you need to use requestType from
queryCellInfoevent argument.- The
rowSpanandcolSpanattributes can be used together to merge cells both vertically and horizontally.
Limitations
- The updateCell method does not support row spanning.
- Row spanning is not compatible with the following features:
- Virtual scrolling
- Infinite scrolling
- Grouping
- Row drag and drop
- Autofill
- Inline editing
- Batch editing
- CRUD