Available in the Full Version

Data Grid - Column Management

This sample demonstrates how to configure Column Resizing, Column Moving and Hiding functionality in igGrid.
Product Name
Product Number
Make Flag
Reorder Point
Sell Start Date
Modified Date
Adjustable RaceAR-53817506/1/19983/11/2004
Bearing BallBA-83277506/1/19983/11/2004
BB Ball BearingBE-23496006/1/19983/11/2004
Headset Ball BearingsBE-29086006/1/19983/11/2004
BladeBL-20366006/1/19983/11/2004
LL CrankarmCA-59653756/1/19983/11/2004
ML CrankarmCA-67383756/1/19983/11/2004
HL CrankarmCA-74573756/1/19983/11/2004
Chainring BoltsCB-29037506/1/19983/11/2004
Chainring NutCN-61377506/1/19983/11/2004
ChainringCR-78337506/1/19983/11/2004
Crown RaceCR-99817506/1/19983/11/2004
Chain StaysCS-28127506/1/19983/11/2004
Decal 1DC-87327506/1/19983/11/2004
Decal 2DC-98247506/1/19983/11/2004
Down TubeDT-23776006/1/19983/11/2004
Mountain End CapsEC-M0927506/1/19983/11/2004
Road End CapsEC-R0987506/1/19983/11/2004
Touring End CapsEC-T2097506/1/19983/11/2004
Fork EndFE-37606006/1/19983/11/2004
FreewheelFH-29813756/1/19983/11/2004
Flat Washer 1FW-10007506/1/19983/11/2004
Flat Washer 6FW-12007506/1/19983/11/2004
Flat Washer 2FW-14007506/1/19983/11/2004
Flat Washer 9FW-34007506/1/19983/11/2004
Flat Washer 4FW-38007506/1/19983/11/2004
Flat Washer 3FW-51607506/1/19983/11/2004
Flat Washer 8FW-58007506/1/19983/11/2004
Flat Washer 5FW-71607506/1/19983/11/2004
Flat Washer 7FW-91607506/1/19983/11/2004
Fork CrownFC-36546006/1/19983/11/2004
Front Derailleur CageFC-39826006/1/19983/11/2004
Front Derailleur LinkageFL-23016006/1/19983/11/2004
Guide PulleyGP-09826006/1/19983/11/2004
LL Grip TapeGT-08206006/1/19983/11/2004
ML Grip TapeGT-12096006/1/19983/11/2004
HL Grip TapeGT-29086006/1/19983/11/2004
Thin-Jam Hex Nut 9HJ-12137506/1/19983/11/2004
Thin-Jam Hex Nut 10HJ-12207506/1/19983/11/2004
Thin-Jam Hex Nut 1HJ-14207506/1/19983/11/2004
Thin-Jam Hex Nut 2HJ-14287506/1/19983/11/2004
Thin-Jam Hex Nut 15HJ-34107506/1/19983/11/2004
Thin-Jam Hex Nut 16HJ-34167506/1/19983/11/2004
Thin-Jam Hex Nut 5HJ-38167506/1/19983/11/2004
Thin-Jam Hex Nut 6HJ-38247506/1/19983/11/2004
Thin-Jam Hex Nut 3HJ-51617506/1/19983/11/2004
Thin-Jam Hex Nut 4HJ-51627506/1/19983/11/2004
Thin-Jam Hex Nut 13HJ-58117506/1/19983/11/2004
Thin-Jam Hex Nut 14HJ-58187506/1/19983/11/2004
Thin-Jam Hex Nut 7HJ-71617506/1/19983/11/2004
Thin-Jam Hex Nut 8HJ-71627506/1/19983/11/2004
Thin-Jam Hex Nut 12HJ-90807506/1/19983/11/2004
Thin-Jam Hex Nut 11HJ-91617506/1/19983/11/2004
Hex Nut 5HN-10247506/1/19983/11/2004
Hex Nut 6HN-10327506/1/19983/11/2004
Hex Nut 16HN-12137506/1/19983/11/2004
Hex Nut 17HN-12207506/1/19983/11/2004
Hex Nut 7HN-12247506/1/19983/11/2004
Hex Nut 8HN-14207506/1/19983/11/2004
Hex Nut 9HN-14287506/1/19983/11/2004
Hex Nut 22HN-34107506/1/19983/11/2004
Hex Nut 23HN-34167506/1/19983/11/2004
Hex Nut 12HN-38167506/1/19983/11/2004
Hex Nut 13HN-38247506/1/19983/11/2004
Hex Nut 1HN-44027506/1/19983/11/2004
Hex Nut 10HN-51617506/1/19983/11/2004
Hex Nut 11HN-51627506/1/19983/11/2004
Hex Nut 2HN-54007506/1/19983/11/2004
Hex Nut 20HN-58117506/1/19983/11/2004
Hex Nut 21HN-58187506/1/19983/11/2004
Hex Nut 3HN-63207506/1/19983/11/2004
Hex Nut 14HN-71617506/1/19983/11/2004
Hex Nut 15HN-71627506/1/19983/11/2004
Hex Nut 4HN-83207506/1/19983/11/2004
Hex Nut 18HN-91617506/1/19983/11/2004
Hex Nut 19HN-91687506/1/19983/11/2004
Handlebar TubeHT-29816006/1/19983/11/2004
Head TubeHT-80196006/1/19983/11/2004
LL HubHU-62803756/1/19983/11/2004
HL HubHU-89983756/1/19983/11/2004
Keyed WasherKW-40917506/1/19983/11/2004
External Lock Washer 3LE-10007506/1/19983/11/2004
External Lock Washer 4LE-12007506/1/19983/11/2004
External Lock Washer 9LE-12017506/1/19983/11/2004
External Lock Washer 5LE-14007506/1/19983/11/2004
External Lock Washer 7LE-38007506/1/19983/11/2004
External Lock Washer 6LE-51607506/1/19983/11/2004
External Lock Washer 1LE-60007506/1/19983/11/2004
External Lock Washer 8LE-71607506/1/19983/11/2004
External Lock Washer 2LE-80007506/1/19983/11/2004
Internal Lock Washer 3LI-10007506/1/19983/11/2004
Internal Lock Washer 4LI-12007506/1/19983/11/2004
Internal Lock Washer 9LI-12017506/1/19983/11/2004
Internal Lock Washer 5LI-14007506/1/19983/11/2004
Internal Lock Washer 7LI-38007506/1/19983/11/2004
Internal Lock Washer 6LI-51607506/1/19983/11/2004
Internal Lock Washer 10LI-58007506/1/19983/11/2004
Internal Lock Washer 1LI-60007506/1/19983/11/2004
Internal Lock Washer 8LI-71607506/1/19983/11/2004
Internal Lock Washer 2LI-80007506/1/19983/11/2004

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Resizing: Use the mouse to resize a column by draging its header's right border. Note: Column resizing is not supported on touch enabled devices. Moving: On mouse enabled devices use the mouse to drag and drop column headers to rearrange their columns. On mouse and touch enabled devices use the column moving icon located on the right of each column header to access the column moving dropdown. You can move multiple columns by using the "Move Columns" dialog accessible from each column moving dropdown. Hiding: To hide a column click on the column hiding icon located on the right of each column header. To show a column click on the hidden columns indicator located on the left of the adjacent visible column where the hidden column previously resided. You can choose to hide/unhide multiple columns by using the "Column Chooser" dialog accessible from each hidden columns indicator.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
	<title></title>

	<!-- Ignite UI for jQuery Required Combined CSS Files -->
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

	<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
	<table id="grid"></table>
	<script src="/data-files/adventureworks.min.js"></script>
	<script>
		$(function () {
			$("#grid").igGrid({
				autoGenerateColumns: false,
				renderCheckboxes: true,
				width: "100%",
				height: "500px",
				columns: [
					{ headerText: "Product Name", key: "Name", dataType: "string", width: "20%" },
					{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "20%" },
					{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "10%" },
					{ headerText: "Reorder Point", key: "ReorderPoint", dataType: "number", width: "10%" },
					{ headerText: "Sell Start Date", key: "SellStartDate", dataType: "date", width: "15%" },
					{ headerText: "Modified Date", key: "ModifiedDate", dataType: "date", width: "15%" },
				],
				dataSource: adventureWorks.slice(0, 100),
				features: [
					{
						name: "Resizing"
					},
					{
						name: "ColumnMoving",
						columnMovingDialogContainment: "window"
					},
					{
						name: "Hiding"
					}
				]
			});
		});
	</script>
</body>
</html>