examples/example-rtl.html

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>SlickGrid example 1: Basic grid</title>
		<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.6.custom.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
	</head>
	<body style="direction:rtl;">
		<table width="100%">
		<tr>
			<td valign="top" width="50%">
				<div id="myGrid" style="width:600px;height:500px;display:none;"></div>
			</td>
			<td valign="top">
				<h2>Demonstrates:</h2>
				<ul>
					<li>basic grid with minimal configuration</li>
				</ul>
			</td>
		</tr>
		</table>

		<script src="../lib/jquery-1.7.min.js"></script>
		<script src="../lib/jquery.event.drag-2.0.min.js"></script>

        <script src="../slick.core.js"></script>
        <script src="../slick.grid.js"></script>

		<script>

		var grid;

		var columns = [
			{id:"title", name:"Title", field:"title"},
			{id:"duration", name:"Duration", field:"duration"},
			{id:"%", name:"% Complete", field:"percentComplete"},
			{id:"start", name:"Start", field:"start"},
			{id:"finish", name:"Finish", field:"finish"},
			{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
		];

		var options = {
            rtl: true,
			enableCellNavigation: true,
            enableColumnReorder: false
		};

		$(function() {
            var data = [];
			for (var i = 0; i < 500; i++) {
				data[i] = {
                    title: "Task " + i,
                    duration: "5 days",
                    percentComplete: Math.round(Math.random() * 100),
                    start: "01/01/2009",
                    finish: "01/05/2009",
                    effortDriven: (i % 5 == 0)
                };
			}

			grid = new Slick.Grid("#myGrid", data, columns, options);

            $("#myGrid").show();
		})

		</script>
	</body>
</html>