103 lines
3.7 KiB
HTML
103 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Job List</title>
|
|
|
|
<!-- AG-Grid CSS (CDN) -->
|
|
<link rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-grid.css">
|
|
<link rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/styles/ag-theme-alpine.css">
|
|
|
|
<style>
|
|
body {font-family:Arial,sans-serif;margin:20px;background:#f8f9fa;}
|
|
.searchContainer{max-width:1600px;}
|
|
.searchBox{background-color:#ccc;width:15%;padding:10px;border-radius:8px;border:1px solid#d1d5db;box-sizing:border-box;font-size: 18px;}
|
|
.searchBoxInput {width:100%;outline:none;background:transparent;font-size:inherit;border:none;}
|
|
.searchBoxInput::placeholder {color:#9ca3af;}
|
|
.container {max-width:1600px;margin:auto;background:#fff;padding:20px;
|
|
border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);}
|
|
#myGrid {height:750px;width:100%;}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="searchContainer">
|
|
<div class="searchBox"style="text-align: right;">
|
|
<input id="searchBoxInput" placeholder="Search jobs (just start typing)">
|
|
</div>
|
|
<div class="container">
|
|
|
|
<div id="myGrid" class="ag-theme-alpine"></div>
|
|
</div>
|
|
</div>
|
|
<!-- AG-Grid JS (CDN) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.0/dist/ag-grid-community.min.js"></script>
|
|
|
|
<script>
|
|
/* ---------- 100 rows of sample data ---------- */
|
|
const rowData = Array.from({length:100},(_,i)=>({
|
|
job_number: 1000+i,
|
|
job_name: `Project ${String.fromCharCode(65+(i%26))}${i+1}`,
|
|
city: `City ${i+1}`,
|
|
country: 'USA',
|
|
email: `job${i+1}@corp.com`,
|
|
phone: `555-${String(100+i).padStart(3,'0')}`,
|
|
dept: ['Eng','Mkt','Sales','HR','Fin','IT'][i%6],
|
|
salary: `$${(90+i%20)*1000}`,
|
|
join: `2024-${String((i%12)+1).padStart(2,'0')}-01`,
|
|
status: i%8===0?'Review':'Active',
|
|
projA: `${65+i%35}%`, projB: `${70+i%30}%`, projC: `${73+i%27}%`,
|
|
rating: (4.0+(i%10)/10).toFixed(1),
|
|
notes: 'On track',
|
|
manager: `M${i%5+1}`,
|
|
team: `T${String.fromCharCode(65+i%8)}`,
|
|
region: ['N','S','E','W'][i%4],
|
|
bonus: `$${i*400}`,
|
|
review: 'Good'
|
|
}));
|
|
|
|
/* ---------- Column definitions ---------- */
|
|
const columnDefs = [
|
|
{field:'job_number',headerName:'Job_Number',pinned:'left',width:120,hide:false},
|
|
{field:'job_name', headerName:'Job_Name', pinned:'left',width:160},
|
|
{field:'city', headerName:'City'},
|
|
{field:'country', headerName:'Country'},
|
|
{field:'email', headerName:'Email'},
|
|
{field:'phone', headerName:'Phone'},
|
|
{field:'dept', headerName:'Dept'},
|
|
{field:'salary', headerName:'Salary'},
|
|
{field:'join', headerName:'Join'},
|
|
{field:'status', headerName:'Status'},
|
|
{field:'projA', headerName:'Proj A'},
|
|
{field:'projB', headerName:'Proj B'},
|
|
{field:'projC', headerName:'Proj C'},
|
|
{field:'rating', headerName:'Rating'},
|
|
{field:'notes', headerName:'Notes'},
|
|
{field:'manager', headerName:'Manager'},
|
|
{field:'team', headerName:'Team'},
|
|
{field:'region', headerName:'Region'},
|
|
{field:'bonus', headerName:'Bonus'},
|
|
{field:'review', headerName:'Review'}
|
|
];
|
|
|
|
/* ---------- Grid options ---------- */
|
|
const gridOptions = {
|
|
columnDefs,
|
|
rowData,
|
|
defaultColDef:{resizable:true,sortable:true,filter:true},
|
|
onGridReady: params => {
|
|
window.gridApi = params.api;
|
|
window.columnApi = params.columnApi;
|
|
}
|
|
};
|
|
|
|
/* ---------- Create the grid ---------- */
|
|
new agGrid.Grid(document.querySelector('#myGrid'), gridOptions);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|