Row spanning in React Grid component

25 Aug 202524 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 queryCellInfo event argument.
  • The rowSpan and colSpan attributes 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:
    1. Virtual scrolling
    2. Infinite scrolling
    3. Grouping
    4. Row drag and drop
    5. Autofill
    6. Inline editing
    7. Batch editing
    8. CRUD

Row spanning using enableRowSpan property

The Syncfusion React Grid introduces a simplified approach to vertically merge cells using the enableRowSpan property.

When the enableRowSpan property is enabled, the Grid automatically merges cells with matching data across adjacent columns without requiring manual span configuration using the queryCellInfo event. These merged cells are visually combined into a single cell, improving readability.

Here is an example of how to use the enableRowSpan property to merge cells vertically:

import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-grids';
import { Freeze, Sort } from '@syncfusion/ej2-react-grids';
import { telecastData } from './datasource';

function App() {
  return (
    <GridComponent dataSource={telecastData} gridLines="Both" enableHover={false} allowSelection={false} allowSorting={true} enableRowSpan={true} allowTextWrap={true} textWrapSettings= height={450} width="auto" >
      <ColumnsDirective>
        <ColumnDirective field="Channel" headerText="Channel" width={150} freeze="Left" isPrimaryKey={true} />
        <ColumnDirective field="Genre" headerText="Genre" width={120} freeze="Left" />
        <ColumnDirective field="Program12AM" headerText="12 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program1AM" headerText="1 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program2AM" headerText="2 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program3AM" headerText="3 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program4AM" headerText="4 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program5AM" headerText="5 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program6AM" headerText="6 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program7AM" headerText="7 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program8AM" headerText="8 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program9AM" headerText="9 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program10AM" headerText="10 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program11AM" headerText="11 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program12PM" headerText="12 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program1PM" headerText="1 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program2PM" headerText="2 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program3PM" headerText="3 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program4PM" headerText="4 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program5PM" headerText="5 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program6PM" headerText="6 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program7PM" headerText="7 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program8PM" headerText="8 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program9PM" headerText="9 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program10PM" headerText="10 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program11PM" headerText="11 PM" width={110} textAlign="Center" allowSorting={false} />
      </ColumnsDirective>
      <Inject services={[Freeze, Sort]} />
    </GridComponent>
  );
}

export default App;
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject } from '@syncfusion/ej2-react-grids';
import { Freeze, Sort } from '@syncfusion/ej2-react-grids';
import { telecastData } from './datasource';

function App() {
  return (
    <GridComponent dataSource={telecastData} gridLines="Both" enableHover={false} allowSelection={false} allowSorting={true} enableRowSpan={true} allowTextWrap={true} textWrapSettings= height={450} width="auto" >
      <ColumnsDirective>
        <ColumnDirective field="Channel" headerText="Channel" width={150} freeze="Left" isPrimaryKey={true} />
        <ColumnDirective field="Genre" headerText="Genre" width={120} freeze="Left" />
        <ColumnDirective field="Program12AM" headerText="12 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program1AM" headerText="1 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program2AM" headerText="2 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program3AM" headerText="3 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program4AM" headerText="4 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program5AM" headerText="5 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program6AM" headerText="6 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program7AM" headerText="7 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program8AM" headerText="8 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program9AM" headerText="9 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program10AM" headerText="10 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program11AM" headerText="11 AM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program12PM" headerText="12 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program1PM" headerText="1 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program2PM" headerText="2 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program3PM" headerText="3 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program4PM" headerText="4 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program5PM" headerText="5 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program6PM" headerText="6 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program7PM" headerText="7 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program8PM" headerText="8 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program9PM" headerText="9 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program10PM" headerText="10 PM" width={110} textAlign="Center" allowSorting={false} />
        <ColumnDirective field="Program11PM" headerText="11 PM" width={110} textAlign="Center" allowSorting={false} />
      </ColumnsDirective>
      <Inject services={[Freeze, Sort]} />
    </GridComponent>
  );
}

export default App;
var telecastData = [
{
    Channel: 'USA News Network',
    Genre: 'News',
    Program12AM: 'Late Night News',
    Program1AM: 'Overnight Brief',
    Program2AM: 'Overnight Brief',
    Program3AM: 'World Recap',
    Program4AM: 'Early Report',
    Program5AM: 'Morning Preview',
    Program6AM: 'Morning Dispatch',
    Program7AM: 'Daily Brief',
    Program8AM: 'National Update',
    Program9AM: 'National Update',
    Program10AM: 'Midday Report',
    Program11AM: 'Breaking Stories',
    Program12PM: 'Global Roundup',
    Program1PM: 'Current Affairs',
    Program2PM: 'News Desk',
    Program3PM: 'Afternoon Digest',
    Program4PM: 'City Beat',
    Program5PM: 'Evening News',
    Program6PM: 'Evening News',
    Program7PM: 'World Tonight',
    Program8PM: 'Prime Report',
    Program9PM: 'Nightly Brief',
    Program10PM: 'Late Edition',
    Program11PM: 'News Wrap',
},
{
    Channel: 'American News Channel',
    Genre: 'News',
    Program12AM: 'Midnight Update',
    Program1AM: 'Global Overnight',
    Program2AM: 'Global Overnight',
    Program3AM: 'News Replay',
    Program4AM: 'Dawn Dispatch',
    Program5AM: 'Business Early',
    Program6AM: 'Early Edition',
    Program7AM: 'Business Beat',
    Program8AM: 'National Update',
    Program9AM: 'National Update',
    Program10AM: 'In Focus',
    Program11AM: 'Market Pulse',
    Program12PM: 'News Today',
    Program1PM: 'World Matters',
    Program2PM: 'Regional Review',
    Program3PM: 'Evening Preview',
    Program4PM: 'Local Stories',
    Program5PM: 'Evening News',
    Program6PM: 'Evening News',
    Program7PM: 'Global Insight',
    Program8PM: 'Prime Focus',
    Program9PM: 'Night Desk',
    Program10PM: 'Late News',
    Program11PM: 'Final Report',
},
{
    Channel: 'Science Frontier TV',
    Genre: 'Science',
    Program12AM: 'Tech Rewind',
    Program1AM: 'Cosmic Replay',
    Program2AM: 'Cosmic Replay',
    Program3AM: 'Science Vault',
    Program4AM: 'Tech Bits',
    Program5AM: 'Nature Shorts',
    Program6AM: 'How It’s Built',
    Program7AM: 'Nature Unveiled',
    Program8AM: 'Tech Titans',
    Program9AM: 'Future Innovators',
    Program10AM: 'Unknown Worlds',
    Program11AM: 'Planet Secrets',
    Program12PM: 'Tomorrow’s Tech',
    Program1PM: 'Space Frontiers',
    Program2PM: 'Myth Crackers',
    Program3PM: 'Cosmic Discoveries',
    Program4PM: 'Tech Lab',
    Program5PM: 'Science Now',
    Program6PM: 'Innovate Today',
    Program7PM: 'Future Worlds',
    Program8PM: 'Star Explorers',
    Program9PM: 'Tech Deep Dive',
    Program10PM: 'Science Spotlight',
    Program11PM: 'Night Lab',
},
{
    Channel: 'Explore America',
    Genre: 'Science',
    Program12AM: 'Wild Nights',
    Program1AM: 'Explorer Vault',
    Program2AM: 'Explorer Vault',
    Program3AM: 'Hidden Gems',
    Program4AM: 'Wild Shorts',
    Program5AM: 'Nature Dawn',
    Program6AM: 'Wild Expeditions',
    Program7AM: 'American Wilderness',
    Program8AM: 'Tech Titans',
    Program9AM: 'Future Innovators',
    Program10AM: 'Hidden Histories',
    Program11AM: 'Mega Projects',
    Program12PM: 'Great Minds',
    Program1PM: 'Beyond Earth',
    Program2PM: 'Star Journey',
    Program3PM: 'Unique Planet',
    Program4PM: 'Adventure Now',
    Program5PM: 'Wild America',
    Program6PM: 'Explorer’s Log',
    Program7PM: 'Nature Quest',
    Program8PM: 'Epic Journeys',
    Program9PM: 'Lost Worlds',
    Program10PM: 'Planet Stories',
    Program11PM: 'Night Trek',
},
{
    Channel: 'Silver Screen Network',
    Genre: 'Movies',
    Program12AM: 'Movie',
    Program1AM: 'Movie',
    Program2AM: 'Movie',
    Program3AM: 'Late Classic',
    Program4AM: 'Late Classic',
    Program5AM: 'Early Feature',
    Program6AM: 'Shadow of Truth',
    Program7AM: 'Shadow of Truth',
    Program8AM: 'Shadow of Truth',
    Program9AM: 'Power Play',
    Program10AM: 'Power Play',
    Program11AM: 'Power Play',
    Program12PM: 'Power Play',
    Program1PM: 'City Vigilante',
    Program2PM: 'City Vigilante',
    Program3PM: 'City Vigilante',
    Program4PM: 'Hero Saga',
    Program5PM: 'Hero Saga',
    Program6PM: 'Prime Movie',
    Program7PM: 'Prime Movie',
    Program8PM: 'Blockbuster Night',
    Program9PM: 'Blockbuster Night',
    Program10PM: 'Late Show',
    Program11PM: 'Late Show',
},
{
    Channel: 'Sports USA',
    Genre: 'Sports',
    Program12AM: 'Sports Replay',
    Program1AM: 'Game Highlights',
    Program2AM: 'Game Highlights',
    Program3AM: 'Sports Vault',
    Program4AM: 'Early Recap',
    Program5AM: 'Morning Warmup',
    Program6AM: 'Morning Kickoff',
    Program7AM: 'Football Classics',
    Program8AM: 'Live Game Day',
    Program9AM: 'Live Game Day',
    Program10AM: 'Top Plays',
    Program11AM: 'Sports Talk',
    Program12PM: 'Hoops Highlights',
    Program1PM: 'Game Plan',
    Program2PM: 'Sports Roundup',
    Program3PM: 'NFL Breakdown',
    Program4PM: 'Sports Desk',
    Program5PM: 'Live Coverage',
    Program6PM: 'Game Night',
    Program7PM: 'Prime Sports',
    Program8PM: 'Big Match',
    Program9PM: 'Sports Wrap',
    Program10PM: 'Late Game',
    Program11PM: 'Night Recap',
},
{
    Channel: 'All Sports Network',
    Genre: 'Sports',
    Program12AM: 'Late Highlights',
    Program1AM: 'Sports Classics',
    Program2AM: 'Sports Classics',
    Program3AM: 'Game Rewind',
    Program4AM: 'Early Games',
    Program5AM: 'Sports Warmup',
    Program6AM: 'Morning Kickoff',
    Program7AM: 'Classic Matchups',
    Program8AM: 'Live Game Day',
    Program9AM: 'Live Game Day',
    Program10AM: 'Top Plays',
    Program11AM: 'Sports Talk',
    Program12PM: 'Baseball Recap',
    Program1PM: 'Game Plan',
    Program2PM: 'Sports Roundup',
    Program3PM: 'Soccer Highlights',
    Program4PM: 'Sports Central',
    Program5PM: 'Live Action',
    Program6PM: 'Prime Match',
    Program7PM: 'Sports Night',
    Program8PM: 'Big Game',
    Program9PM: 'Game Recap',
    Program10PM: 'Late Sports',
    Program11PM: 'Final Score',
},
{
    Channel: 'Kids Fun Zone',
    Genre: 'Kids',
    Program12AM: 'Cartoon Rewind',
    Program1AM: 'Late Toons',
    Program2AM: 'Late Toons',
    Program3AM: 'Kid Classics',
    Program4AM: 'Kid Classics',
    Program5AM: 'Early Toons',
    Program6AM: 'Adventure Pals',
    Program7AM: 'Super Heroes',
    Program8AM: 'Super Heroes',
    Program9AM: 'Super Heroes',
    Program10AM: 'Mystery Crew',
    Program11AM: 'Funny Chase',
    Program12PM: 'Cartoon Craze',
    Program1PM: 'Quest Buddies',
    Program2PM: 'Quest Buddies',
    Program3PM: 'Team Turbo',
    Program4PM: 'Fun Factory',
    Program5PM: 'Kid Quest',
    Program6PM: 'Toon Time',
    Program7PM: 'Family Flicks',
    Program8PM: 'Adventure Hour',
    Program9PM: 'Night Toons',
    Program10PM: 'Night Toons',
    Program11PM: 'Sleepy Stories',
},
{
    Channel: 'Family Playhouse',
    Genre: 'Kids',
    Program12AM: 'Late Kid Show',
    Program1AM: 'Moonlit Tales',
    Program2AM: 'Moonlit Tales',
    Program3AM: 'Classic Cartoons',
    Program4AM: 'Classic Cartoons',
    Program5AM: 'Morning Pals',
    Program6AM: 'Little Explorers',
    Program7AM: 'Rescue Pals',
    Program8AM: 'House of Laughs',
    Program9AM: 'House of Laughs',
    Program10AM: 'Mystery Crew',
    Program11AM: 'Magic Wishes',
    Program12PM: 'Teen Spotlight',
    Program1PM: 'Ocean Adventures',
    Program2PM: 'Ocean Adventures',
    Program3PM: 'Rescue Pals',
    Program4PM: 'Family Fun',
    Program5PM: 'Kid Adventures',
    Program6PM: 'Toon Party',
    Program7PM: 'Family Time',
    Program8PM: 'Magic Hour',
    Program9PM: 'Evening Toons',
    Program10PM: 'Evening Toons',
    Program11PM: 'Bedtime Tales',
},
{
    Channel: 'Magic Youth TV',
    Genre: 'Kids',
    Program12AM: 'Midnight Toons',
    Program1AM: 'Starlight Stories',
    Program2AM: 'Starlight Stories',
    Program3AM: 'Toon Vault',
    Program4AM: 'Toon Vault',
    Program5AM: 'Early Adventures',
    Program6AM: 'Mouse Playhouse',
    Program7AM: 'City Kids',
    Program8AM: 'Mystery Town',
    Program9AM: 'Mystery Town',
    Program10AM: 'Mystery Crew',
    Program11AM: 'Witch Cottage',
    Program12PM: 'Swamp Tales',
    Program1PM: 'Stepbrothers',
    Program2PM: 'Stepbrothers',
    Program3PM: 'City Kids',
    Program4PM: 'Youth Quest',
    Program5PM: 'Fun Tales',
    Program6PM: 'Cartoon Club',
    Program7PM: 'Kid Heroes',
    Program8PM: 'Magic Night',
    Program9PM: 'Toon Dreams',
    Program10PM: 'Toon Dreams',
    Program11PM: 'Night Stories',
},
{
    Channel: 'Wild America TV',
    Genre: 'Wildlife',
    Program12AM: 'Night Creatures',
    Program1AM: 'Wild Rewind',
    Program2AM: 'Wild Rewind',
    Program3AM: 'Animal Vault',
    Program4AM: 'Nature Clips',
    Program5AM: 'Wild Dawn',
    Program6AM: 'Nature Guide',
    Program7AM: 'Wild Trails',
    Program8AM: 'Predator Watch',
    Program9AM: 'Predator Watch',
    Program10AM: 'Ocean Titans',
    Program11AM: 'Safari Quest',
    Program12PM: 'Big Beasts',
    Program1PM: 'Night Safari',
    Program2PM: 'Night Safari',
    Program3PM: 'Nature Guide',
    Program4PM: 'Wild Tracks',
    Program5PM: 'Animal Planet',
    Program6PM: 'Safari Nights',
    Program7PM: 'Wild World',
    Program8PM: 'Beast Hunters',
    Program9PM: 'Nature Nights',
    Program10PM: 'Wild Chronicles',
    Program11PM: 'Night Beasts',
},
{
    Channel: 'Earth Discovery',
    Genre: 'Nature',
    Program12AM: 'Planet Replay',
    Program1AM: 'Earth After Dark',
    Program2AM: 'Earth After Dark',
    Program3AM: 'Nature Classics',
    Program4AM: 'Earth Early',
    Program5AM: 'Dawn Planet',
    Program6AM: 'Planet Wonders',
    Program7AM: 'Frozen Lands',
    Program8AM: 'Life on Earth',
    Program9AM: 'Life on Earth',
    Program10AM: 'Blue Seas',
    Program11AM: 'Nature Marvels',
    Program12PM: 'Earth Insights',
    Program1PM: 'Night Safari',
    Program2PM: 'Night Safari',
    Program3PM: 'Planet Wonders',
    Program4PM: 'Eco Quest',
    Program5PM: 'Nature Now',
    Program6PM: 'Planet Pulse',
    Program7PM: 'Earth Stories',
    Program8PM: 'Wild Horizons',
    Program9PM: 'Nature Deep',
    Program10PM: 'Earth Night',
    Program11PM: 'Planet Recap',
},
];
export let telecastData: Object[] = [
{
    Channel: 'USA News Network',
    Genre: 'News',
    Program12AM: 'Late Night News',
    Program1AM: 'Overnight Brief',
    Program2AM: 'Overnight Brief',
    Program3AM: 'World Recap',
    Program4AM: 'Early Report',
    Program5AM: 'Morning Preview',
    Program6AM: 'Morning Dispatch',
    Program7AM: 'Daily Brief',
    Program8AM: 'National Update',
    Program9AM: 'National Update',
    Program10AM: 'Midday Report',
    Program11AM: 'Breaking Stories',
    Program12PM: 'Global Roundup',
    Program1PM: 'Current Affairs',
    Program2PM: 'News Desk',
    Program3PM: 'Afternoon Digest',
    Program4PM: 'City Beat',
    Program5PM: 'Evening News',
    Program6PM: 'Evening News',
    Program7PM: 'World Tonight',
    Program8PM: 'Prime Report',
    Program9PM: 'Nightly Brief',
    Program10PM: 'Late Edition',
    Program11PM: 'News Wrap',
},
{
    Channel: 'American News Channel',
    Genre: 'News',
    Program12AM: 'Midnight Update',
    Program1AM: 'Global Overnight',
    Program2AM: 'Global Overnight',
    Program3AM: 'News Replay',
    Program4AM: 'Dawn Dispatch',
    Program5AM: 'Business Early',
    Program6AM: 'Early Edition',
    Program7AM: 'Business Beat',
    Program8AM: 'National Update',
    Program9AM: 'National Update',
    Program10AM: 'In Focus',
    Program11AM: 'Market Pulse',
    Program12PM: 'News Today',
    Program1PM: 'World Matters',
    Program2PM: 'Regional Review',
    Program3PM: 'Evening Preview',
    Program4PM: 'Local Stories',
    Program5PM: 'Evening News',
    Program6PM: 'Evening News',
    Program7PM: 'Global Insight',
    Program8PM: 'Prime Focus',
    Program9PM: 'Night Desk',
    Program10PM: 'Late News',
    Program11PM: 'Final Report',
},
{
    Channel: 'Science Frontier TV',
    Genre: 'Science',
    Program12AM: 'Tech Rewind',
    Program1AM: 'Cosmic Replay',
    Program2AM: 'Cosmic Replay',
    Program3AM: 'Science Vault',
    Program4AM: 'Tech Bits',
    Program5AM: 'Nature Shorts',
    Program6AM: 'How It’s Built',
    Program7AM: 'Nature Unveiled',
    Program8AM: 'Tech Titans',
    Program9AM: 'Future Innovators',
    Program10AM: 'Unknown Worlds',
    Program11AM: 'Planet Secrets',
    Program12PM: 'Tomorrow’s Tech',
    Program1PM: 'Space Frontiers',
    Program2PM: 'Myth Crackers',
    Program3PM: 'Cosmic Discoveries',
    Program4PM: 'Tech Lab',
    Program5PM: 'Science Now',
    Program6PM: 'Innovate Today',
    Program7PM: 'Future Worlds',
    Program8PM: 'Star Explorers',
    Program9PM: 'Tech Deep Dive',
    Program10PM: 'Science Spotlight',
    Program11PM: 'Night Lab',
},
{
    Channel: 'Explore America',
    Genre: 'Science',
    Program12AM: 'Wild Nights',
    Program1AM: 'Explorer Vault',
    Program2AM: 'Explorer Vault',
    Program3AM: 'Hidden Gems',
    Program4AM: 'Wild Shorts',
    Program5AM: 'Nature Dawn',
    Program6AM: 'Wild Expeditions',
    Program7AM: 'American Wilderness',
    Program8AM: 'Tech Titans',
    Program9AM: 'Future Innovators',
    Program10AM: 'Hidden Histories',
    Program11AM: 'Mega Projects',
    Program12PM: 'Great Minds',
    Program1PM: 'Beyond Earth',
    Program2PM: 'Star Journey',
    Program3PM: 'Unique Planet',
    Program4PM: 'Adventure Now',
    Program5PM: 'Wild America',
    Program6PM: 'Explorer’s Log',
    Program7PM: 'Nature Quest',
    Program8PM: 'Epic Journeys',
    Program9PM: 'Lost Worlds',
    Program10PM: 'Planet Stories',
    Program11PM: 'Night Trek',
},
{
    Channel: 'Silver Screen Network',
    Genre: 'Movies',
    Program12AM: 'Movie',
    Program1AM: 'Movie',
    Program2AM: 'Movie',
    Program3AM: 'Late Classic',
    Program4AM: 'Late Classic',
    Program5AM: 'Early Feature',
    Program6AM: 'Shadow of Truth',
    Program7AM: 'Shadow of Truth',
    Program8AM: 'Shadow of Truth',
    Program9AM: 'Power Play',
    Program10AM: 'Power Play',
    Program11AM: 'Power Play',
    Program12PM: 'Power Play',
    Program1PM: 'City Vigilante',
    Program2PM: 'City Vigilante',
    Program3PM: 'City Vigilante',
    Program4PM: 'Hero Saga',
    Program5PM: 'Hero Saga',
    Program6PM: 'Prime Movie',
    Program7PM: 'Prime Movie',
    Program8PM: 'Blockbuster Night',
    Program9PM: 'Blockbuster Night',
    Program10PM: 'Late Show',
    Program11PM: 'Late Show',
},
{
    Channel: 'Sports USA',
    Genre: 'Sports',
    Program12AM: 'Sports Replay',
    Program1AM: 'Game Highlights',
    Program2AM: 'Game Highlights',
    Program3AM: 'Sports Vault',
    Program4AM: 'Early Recap',
    Program5AM: 'Morning Warmup',
    Program6AM: 'Morning Kickoff',
    Program7AM: 'Football Classics',
    Program8AM: 'Live Game Day',
    Program9AM: 'Live Game Day',
    Program10AM: 'Top Plays',
    Program11AM: 'Sports Talk',
    Program12PM: 'Hoops Highlights',
    Program1PM: 'Game Plan',
    Program2PM: 'Sports Roundup',
    Program3PM: 'NFL Breakdown',
    Program4PM: 'Sports Desk',
    Program5PM: 'Live Coverage',
    Program6PM: 'Game Night',
    Program7PM: 'Prime Sports',
    Program8PM: 'Big Match',
    Program9PM: 'Sports Wrap',
    Program10PM: 'Late Game',
    Program11PM: 'Night Recap',
},
{
    Channel: 'All Sports Network',
    Genre: 'Sports',
    Program12AM: 'Late Highlights',
    Program1AM: 'Sports Classics',
    Program2AM: 'Sports Classics',
    Program3AM: 'Game Rewind',
    Program4AM: 'Early Games',
    Program5AM: 'Sports Warmup',
    Program6AM: 'Morning Kickoff',
    Program7AM: 'Classic Matchups',
    Program8AM: 'Live Game Day',
    Program9AM: 'Live Game Day',
    Program10AM: 'Top Plays',
    Program11AM: 'Sports Talk',
    Program12PM: 'Baseball Recap',
    Program1PM: 'Game Plan',
    Program2PM: 'Sports Roundup',
    Program3PM: 'Soccer Highlights',
    Program4PM: 'Sports Central',
    Program5PM: 'Live Action',
    Program6PM: 'Prime Match',
    Program7PM: 'Sports Night',
    Program8PM: 'Big Game',
    Program9PM: 'Game Recap',
    Program10PM: 'Late Sports',
    Program11PM: 'Final Score',
},
{
    Channel: 'Kids Fun Zone',
    Genre: 'Kids',
    Program12AM: 'Cartoon Rewind',
    Program1AM: 'Late Toons',
    Program2AM: 'Late Toons',
    Program3AM: 'Kid Classics',
    Program4AM: 'Kid Classics',
    Program5AM: 'Early Toons',
    Program6AM: 'Adventure Pals',
    Program7AM: 'Super Heroes',
    Program8AM: 'Super Heroes',
    Program9AM: 'Super Heroes',
    Program10AM: 'Mystery Crew',
    Program11AM: 'Funny Chase',
    Program12PM: 'Cartoon Craze',
    Program1PM: 'Quest Buddies',
    Program2PM: 'Quest Buddies',
    Program3PM: 'Team Turbo',
    Program4PM: 'Fun Factory',
    Program5PM: 'Kid Quest',
    Program6PM: 'Toon Time',
    Program7PM: 'Family Flicks',
    Program8PM: 'Adventure Hour',
    Program9PM: 'Night Toons',
    Program10PM: 'Night Toons',
    Program11PM: 'Sleepy Stories',
},
{
    Channel: 'Family Playhouse',
    Genre: 'Kids',
    Program12AM: 'Late Kid Show',
    Program1AM: 'Moonlit Tales',
    Program2AM: 'Moonlit Tales',
    Program3AM: 'Classic Cartoons',
    Program4AM: 'Classic Cartoons',
    Program5AM: 'Morning Pals',
    Program6AM: 'Little Explorers',
    Program7AM: 'Rescue Pals',
    Program8AM: 'House of Laughs',
    Program9AM: 'House of Laughs',
    Program10AM: 'Mystery Crew',
    Program11AM: 'Magic Wishes',
    Program12PM: 'Teen Spotlight',
    Program1PM: 'Ocean Adventures',
    Program2PM: 'Ocean Adventures',
    Program3PM: 'Rescue Pals',
    Program4PM: 'Family Fun',
    Program5PM: 'Kid Adventures',
    Program6PM: 'Toon Party',
    Program7PM: 'Family Time',
    Program8PM: 'Magic Hour',
    Program9PM: 'Evening Toons',
    Program10PM: 'Evening Toons',
    Program11PM: 'Bedtime Tales',
},
{
    Channel: 'Magic Youth TV',
    Genre: 'Kids',
    Program12AM: 'Midnight Toons',
    Program1AM: 'Starlight Stories',
    Program2AM: 'Starlight Stories',
    Program3AM: 'Toon Vault',
    Program4AM: 'Toon Vault',
    Program5AM: 'Early Adventures',
    Program6AM: 'Mouse Playhouse',
    Program7AM: 'City Kids',
    Program8AM: 'Mystery Town',
    Program9AM: 'Mystery Town',
    Program10AM: 'Mystery Crew',
    Program11AM: 'Witch Cottage',
    Program12PM: 'Swamp Tales',
    Program1PM: 'Stepbrothers',
    Program2PM: 'Stepbrothers',
    Program3PM: 'City Kids',
    Program4PM: 'Youth Quest',
    Program5PM: 'Fun Tales',
    Program6PM: 'Cartoon Club',
    Program7PM: 'Kid Heroes',
    Program8PM: 'Magic Night',
    Program9PM: 'Toon Dreams',
    Program10PM: 'Toon Dreams',
    Program11PM: 'Night Stories',
},
{
    Channel: 'Wild America TV',
    Genre: 'Wildlife',
    Program12AM: 'Night Creatures',
    Program1AM: 'Wild Rewind',
    Program2AM: 'Wild Rewind',
    Program3AM: 'Animal Vault',
    Program4AM: 'Nature Clips',
    Program5AM: 'Wild Dawn',
    Program6AM: 'Nature Guide',
    Program7AM: 'Wild Trails',
    Program8AM: 'Predator Watch',
    Program9AM: 'Predator Watch',
    Program10AM: 'Ocean Titans',
    Program11AM: 'Safari Quest',
    Program12PM: 'Big Beasts',
    Program1PM: 'Night Safari',
    Program2PM: 'Night Safari',
    Program3PM: 'Nature Guide',
    Program4PM: 'Wild Tracks',
    Program5PM: 'Animal Planet',
    Program6PM: 'Safari Nights',
    Program7PM: 'Wild World',
    Program8PM: 'Beast Hunters',
    Program9PM: 'Nature Nights',
    Program10PM: 'Wild Chronicles',
    Program11PM: 'Night Beasts',
},
{
    Channel: 'Earth Discovery',
    Genre: 'Nature',
    Program12AM: 'Planet Replay',
    Program1AM: 'Earth After Dark',
    Program2AM: 'Earth After Dark',
    Program3AM: 'Nature Classics',
    Program4AM: 'Earth Early',
    Program5AM: 'Dawn Planet',
    Program6AM: 'Planet Wonders',
    Program7AM: 'Frozen Lands',
    Program8AM: 'Life on Earth',
    Program9AM: 'Life on Earth',
    Program10AM: 'Blue Seas',
    Program11AM: 'Nature Marvels',
    Program12PM: 'Earth Insights',
    Program1PM: 'Night Safari',
    Program2PM: 'Night Safari',
    Program3PM: 'Planet Wonders',
    Program4PM: 'Eco Quest',
    Program5PM: 'Nature Now',
    Program6PM: 'Planet Pulse',
    Program7PM: 'Earth Stories',
    Program8PM: 'Wild Horizons',
    Program9PM: 'Nature Deep',
    Program10PM: 'Earth Night',
    Program11PM: 'Planet Recap',
},
];

You can also control spanning at the column level. To prevent merging for specific columns, set enableRowSpan to false in the column definition.

Limitation

  • Virtualization
  • Infinite Scrolling
  • Lazy Load Grouping
  • Row Drag and Drop
  • Column Virtualization
  • Detail Template
  • Editing
  • Export
  • Foreign Key
  • Hierarchy Grid