HelpBot Assistant

How can I help you?

Row Spanning in React Grid Component

17 Feb 202624 minutes to read

The Grid provides row spanning capabilities to merge two or more cells in a row into a single cell, reducing information repetition across multiple rows and enhancing readability.

Row spanning

Row spanning merges adjacent cells vertically into a single cell. The feature uses two key concepts:

  • rowSpan: Specifies the number of consecutive row cells to be merged vertically.
  • queryCellInfo: Triggered for each grid cell, allowing custom cell configuration.

The queryCellInfo event enables row spanning by setting the rowSpan attribute during cell rendering. The Grid processes this attribute and renders the merged cell across the specified number of rows.

The following example demonstrates row spanning in action:

  • “Davolio” cell spans two rows in the “Employee Name” column.
  • “Lunch Break” cell spans two rows and three columns simultaneously (combined row and column spanning) 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='315' 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='315' 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'
    }
];

  • Spanning can be disabled for a particular Grid page by using the requestType value from the 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 modifications to spanned cells.

  • The following features are incompatible:

    • Virtual scrolling
    • Infinite scrolling
    • Grouping
    • Row drag and drop
    • Autofill
    • Inline editing
    • Batch editing
    • CRUD operations

Row spanning using enableRowSpan property

For a simplified row spanning approach to vertically merge cells, use the enableRowSpan property.

When enableRowSpan is enabled:

  • The Grid automatically detects cells with matching data across adjacent rows.
  • Matching cells merge into a single cell visually.
  • No manual span configuration through queryCellInfo event required.
  • Improves readability by eliminating redundant data display.

This example demonstrates the enableRowSpan property for merging 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={355} 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={355} 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',
},
];

Row spanning can also be controlled at the column level. Set enableRowSpan to false in a column definition to disable merging for that column.

Limitation

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