Apply filtering styles

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/employee-data-allDatatypes"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

	<table id="gridSimpleFiltering"></table>

CSS

/* Consistent row and container height */
.ui-iggrid-filterrow,
.ui-igedit-container,
.ui-igedit-container a {
  height: 45px !important;
}

/* Adjust vertical positioning of the icon */
.ui-igedit-container a::before {
  position: relative !important;
  top: 0.5rem !important;
}

/* Input font size */
.ui-igedit-input {
  font-size: 20px !important;
}

JavaScript

$(function () {
	const sampleData = [
		{
			FirstName: "Alice",
			LastName: "Johnson",
			RegistererDate: "2024-05-10",
			Country: "USA",
			Age: 30,
			IsActive: true,
			RegistererTime: "10:00 AM"
		},
		{
			FirstName: "Bob",
			LastName: "Smith",
			RegistererDate: "2024-04-15",
			Country: "Canada",
			Age: 45,
			IsActive: false,
			RegistererTime: "2:30 PM"
		},
		{
			FirstName: "Charlie",
			LastName: "Brown",
			RegistererDate: "2023-12-01",
			Country: "UK",
			Age: 28,
			IsActive: true,
			RegistererTime: "9:15 AM"
		}
	];


	$("#gridSimpleFiltering").igGrid({
		autoGenerateColumns: false,
		height: "400px",
		width: "100%",
		columns: [
			{ headerText: "First Name", key: "FirstName", dataType: "string" },
			{ headerText: "Last Name", key: "LastName", dataType: "string" },
			{ headerText: "Register Date", key: "RegistererDate", dataType: "date" },
			{ headerText: "Country", key: "Country", dataType: "string" },
			{ headerText: "Age", key: "Age", dataType: "number" },
			{ headerText: "Is Active", key: "IsActive", dataType: "bool" },
			{ headerText: "Time", key: "RegistererTime", dataType: "string" }
		],
		dataSource: sampleData,
		features: [
			{ name: "Filtering", type: "local" }
		]
	});
});