Spaces:

etrano
/

zz

Running

App Files Files Community

zz / index.html

etrano

I can't see table rows - Initial Deployment

c592faa verified 10 months ago

raw

history blame contribute delete

36.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TanStack Table with TailwindCSS</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<script src="https://unpkg.com/@tanstack/table-core@8.9.3/build/umd/index.production.js"></script>
	<style>
	/* Custom scrollbar for table */
	.table-container::-webkit-scrollbar {
	height: 8px;
	width: 8px;
	}
	.table-container::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
	}
	.table-container::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
	}
	.table-container::-webkit-scrollbar-thumb:hover {
	background: #555;
	}

	/* Animation for row hover */
	@keyframes rowHover {
	0% { background-color: inherit; }
	100% { background-color: #f8fafc; }
	}

	.animate-row-hover:hover {
	animation: rowHover 0.2s ease-out forwards;
	}

	/* Loading spinner */
	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

	.loading-spinner {
	animation: spin 1s linear infinite;
	}
	</style>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<div class="container mx-auto px-4 py-8">
	<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
	<div>
	<h1 class="text-2xl font-bold text-gray-800">Employee Directory</h1>
	<p class="text-gray-600">Manage your organization's employees</p>
	</div>
	<div class="flex flex-col sm:flex-row gap-3 w-full md:w-auto">
	<div class="relative flex-grow">
	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
	<i class="fas fa-search text-gray-400"></i>
	</div>
	<input
	type="text"
	id="searchInput"
	placeholder="Search employees..."
	class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
	>
	</div>
	<button
	id="addEmployeeBtn"
	class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2 transition-colors"
	>
	<i class="fas fa-plus"></i>
	<span>Add Employee</span>
	</button>
	</div>
	</div>

	<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
	<div class="flex items-center gap-2">
	<label for="statusFilter" class="text-sm font-medium text-gray-700">Status:</label>
	<select
	id="statusFilter"
	class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
	>
	<option value="all">All</option>
	<option value="active">Active</option>
	<option value="inactive">Inactive</option>
	<option value="on-leave">On Leave</option>
	</select>
	</div>

	<div class="flex items-center gap-2">
	<label class="text-sm font-medium text-gray-700">Department:</label>
	<div class="flex flex-wrap gap-2">
	<button data-dept="all" class="department-pill px-3 py-1 rounded-full text-xs bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 active:bg-blue-300">
	All
	</button>
	<button data-dept="Engineering" class="department-pill px-3 py-1 rounded-full text-xs bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 active:bg-blue-300">
	Engineering
	</button>
	<button data-dept="Marketing" class="department-pill px-3 py-1 rounded-full text-xs bg-purple-100 text-purple-800 border border-purple-200 hover:bg-purple-200 active:bg-purple-300">
	Marketing
	</button>
	<button data-dept="Sales" class="department-pill px-3 py-1 rounded-full text-xs bg-green-100 text-green-800 border border-green-200 hover:bg-green-200 active:bg-green-300">
	Sales
	</button>
	<button data-dept="HR" class="department-pill px-3 py-1 rounded-full text-xs bg-pink-100 text-pink-800 border border-pink-200 hover:bg-pink-200 active:bg-pink-300">
	HR
	</button>
	<button data-dept="Finance" class="department-pill px-3 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800 border border-yellow-200 hover:bg-yellow-200 active:bg-yellow-300">
	Finance
	</button>
	<button data-dept="Product" class="department-pill px-3 py-1 rounded-full text-xs bg-indigo-100 text-indigo-800 border border-indigo-200 hover:bg-indigo-200 active:bg-indigo-300">
	Product
	</button>
	<button data-dept="Design" class="department-pill px-3 py-1 rounded-full text-xs bg-red-100 text-red-800 border border-red-200 hover:bg-red-200 active:bg-red-300">
	Design
	</button>
	<button data-dept="Operations" class="department-pill px-3 py-1 rounded-full text-xs bg-gray-100 text-gray-800 border border-gray-200 hover:bg-gray-200 active:bg-gray-300">
	Operations
	</button>
	</div>
	</div>

	<div class="flex items-center gap-2">
	<label for="rowsPerPage" class="text-sm font-medium text-gray-700">Rows:</label>
	<select
	id="rowsPerPage"
	class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
	>
	<option value="5">5</option>
	<option value="10" selected>10</option>
	<option value="20">20</option>
	<option value="50">50</option>
	</select>
	</div>
	</div>

	<div class="table-container overflow-x-auto rounded-lg border border-gray-200">
	<div id="loadingIndicator" class="hidden p-8 flex items-center justify-center">
	<div class="loading-spinner h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
	</div>
	<table id="dataTable" class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr id="tableHeader"></tr>
	</thead>
	<tbody id="tableBody" class="bg-white divide-y divide-gray-200"></tbody>
	</table>
	</div>

	<div class="flex flex-col sm:flex-row items-center justify-between mt-4 gap-4">
	<div class="text-sm text-gray-600">
	Showing <span id="showingFrom">1</span> to <span id="showingTo">10</span> of <span id="totalItems">50</span> entries
	</div>

	<div class="flex items-center gap-2">
	<button id="firstPage" class="px-3 py-1 border rounded-md disabled:opacity-50">
	<i class="fas fa-angle-double-left"></i>
	</button>
	<button id="prevPage" class="px-3 py-1 border rounded-md disabled:opacity-50">
	<i class="fas fa-angle-left"></i>
	</button>
	<div id="pageNumbers" class="flex gap-1"></div>
	<button id="nextPage" class="px-3 py-1 border rounded-md disabled:opacity-50">
	<i class="fas fa-angle-right"></i>
	</button>
	<button id="lastPage" class="px-3 py-1 border rounded-md disabled:opacity-50">
	<i class="fas fa-angle-double-right"></i>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Employee Modal -->
	<div id="employeeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
	<div class="flex justify-between items-center border-b px-6 py-4">
	<h3 class="text-lg font-semibold" id="modalTitle">Add Employee</h3>
	<button id="closeModal" class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div class="p-6">
	<form id="employeeForm">
	<div class="mb-4">
	<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
	<input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
	</div>
	<div class="mb-4">
	<label for="position" class="block text-sm font-medium text-gray-700 mb-1">Position</label>
	<input type="text" id="position" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
	</div>
	<div class="mb-4">
	<label for="department" class="block text-sm font-medium text-gray-700 mb-1">Department</label>
	<select id="department" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
	<option value="Engineering">Engineering</option>
	<option value="Marketing">Marketing</option>
	<option value="Sales">Sales</option>
	<option value="HR">Human Resources</option>
	<option value="Finance">Finance</option>
	</select>
	</div>
	<div class="mb-4">
	<label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
	<select id="status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500">
	<option value="active">Active</option>
	<option value="inactive">Inactive</option>
	<option value="on-leave">On Leave</option>
	</select>
	</div>
	<div class="flex justify-end gap-3 mt-6">
	<button type="button" id="cancelBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button>
	<button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Save</button>
	</div>
	</form>
	</div>
	</div>
	</div>

	<script>
	// Sample data (100 entries)
	const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Product', 'Design', 'Operations'];
	const positions = {
	Engineering: ['Software Engineer', 'Frontend Developer', 'Backend Developer', 'DevOps Engineer', 'QA Engineer', 'Data Engineer'],
	Marketing: ['Marketing Specialist', 'Content Writer', 'SEO Specialist', 'Social Media Manager'],
	Sales: ['Sales Executive', 'Sales Manager', 'Account Executive', 'Business Development'],
	HR: ['HR Coordinator', 'Recruiter', 'HR Manager', 'Talent Acquisition'],
	Finance: ['Finance Manager', 'Accountant', 'Financial Analyst', 'Controller'],
	Product: ['Product Manager', 'Product Owner', 'Product Designer'],
	Design: ['UX Designer', 'UI Designer', 'Graphic Designer'],
	Operations: ['Operations Manager', 'Office Administrator']
	};
	const statuses = ['active', 'inactive', 'on-leave'];

	const firstNames = ['John', 'Jane', 'Robert', 'Emily', 'Michael', 'Sarah', 'David', 'Jessica', 'Thomas', 'Lisa', 'William', 'Karen', 'James', 'Nancy', 'Daniel', 'Jennifer', 'Richard', 'Susan', 'Joseph', 'Margaret'];
	const lastNames = ['Doe', 'Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Miller', 'Davis', 'Garcia', 'Rodriguez', 'Wilson', 'Martinez', 'Anderson', 'Taylor', 'Thomas', 'Lee', 'Perez', 'Thompson', 'White', 'Harris'];

	const data = [];
	for (let i = 1; i <= 100; i++) {
	const dept = departments[Math.floor(Math.random() * departments.length)];
	const pos = positions[dept][Math.floor(Math.random() * positions[dept].length)];
	const status = statuses[Math.floor(Math.random() * statuses.length)];
	const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
	const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
	const joinDate = new Date(2018 + Math.floor(Math.random() * 5), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1);

	data.push({
	id: i,
	name: `${firstName} ${lastName}`,
	position: pos,
	department: dept,
	status: status,
	joinDate: joinDate.toISOString().split('T')[0]
	});
	}

	// Initialize TanStack Table
	const table = window.TanStackTableCore;

	// Column definitions
	const columns = [
	{
	accessorKey: 'id',
	header: 'ID',
	size: 80,
	cell: info => info.getValue(),
	},
	{
	accessorKey: 'name',
	header: 'Name',
	cell: info => {
	const name = info.getValue();
	return `<div class="flex items-center gap-3">
	<div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-medium">
	${name.charAt(0)}
	</div>
	<span class="font-medium">${name}</span>
	</div>`;
	},
	},
	{
	accessorKey: 'position',
	header: 'Position',
	cell: info => `<span class="text-gray-700">${info.getValue()}</span>`,
	},
	{
	accessorKey: 'department',
	header: 'Department',
	cell: info => {
	const dept = info.getValue();
	let bgColor = 'bg-gray-100 text-gray-800';
	if (dept === 'Engineering') bgColor = 'bg-blue-100 text-blue-800';
	if (dept === 'Marketing') bgColor = 'bg-purple-100 text-purple-800';
	if (dept === 'Sales') bgColor = 'bg-green-100 text-green-800';
	if (dept === 'HR') bgColor = 'bg-pink-100 text-pink-800';
	if (dept === 'Finance') bgColor = 'bg-yellow-100 text-yellow-800';

	return `<span class="px-2 py-1 text-xs rounded-full ${bgColor}">${dept}</span>`;
	},
	},
	{
	accessorKey: 'status',
	header: 'Status',
	cell: info => {
	const status = info.getValue();
	let bgColor = 'bg-gray-100 text-gray-800';
	let icon = 'fa-circle';
	if (status === 'active') {
	bgColor = 'bg-green-100 text-green-800';
	icon = 'fa-check-circle';
	}
	if (status === 'inactive') {
	bgColor = 'bg-red-100 text-red-800';
	icon = 'fa-times-circle';
	}
	if (status === 'on-leave') {
	bgColor = 'bg-yellow-100 text-yellow-800';
	icon = 'fa-umbrella-beach';
	}

	return `<div class="flex items-center gap-2">
	<i class="fas ${icon} text-xs"></i>
	<span class="capitalize">${status}</span>
	</div>`;
	},
	},
	{
	accessorKey: 'joinDate',
	header: 'Join Date',
	cell: info => {
	const date = new Date(info.getValue());
	return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
	},
	},
	{
	id: 'actions',
	header: 'Actions',
	cell: info => {
	return `<div class="flex gap-2">
	<button class="edit-btn px-2 py-1 text-blue-600 hover:text-blue-800" data-id="${info.row.original.id}">
	<i class="fas fa-edit"></i>
	</button>
	<button class="delete-btn px-2 py-1 text-red-600 hover:text-red-800" data-id="${info.row.original.id}">
	<i class="fas fa-trash"></i>
	</button>
	</div>`;
	},
	},
	];

	// Table state
	let tableState = {
	data: [...data],
	columns,
	pagination: {
	pageIndex: 0,
	pageSize: 10,
	},
	sorting: [],
	globalFilter: '',
	columnFilters: [],
	};

	// Initialize table instance
	const tableInstance = table.createTable({
	data: [...data], // Ensure fresh data is passed
	columns: tableState.columns,
	state: {
	pagination: tableState.pagination,
	sorting: tableState.sorting,
	globalFilter: tableState.globalFilter,
	columnFilters: tableState.columnFilters,
	},
	initialState: {
	pagination: {
	pageSize: 10
	}
	},
	onPaginationChange: updater => {
	tableState.pagination = typeof updater === 'function' ? updater(tableState.pagination) : updater;
	renderTable();
	},
	onSortingChange: updater => {
	tableState.sorting = typeof updater === 'function' ? updater(tableState.sorting) : updater;
	renderTable();
	},
	onGlobalFilterChange: updater => {
	tableState.globalFilter = typeof updater === 'function' ? updater(tableState.globalFilter) : updater;
	tableState.pagination.pageIndex = 0; // Reset to first page on filter
	renderTable();
	},
	onColumnFiltersChange: updater => {
	tableState.columnFilters = typeof updater === 'function' ? updater(tableState.columnFilters) : updater;
	tableState.pagination.pageIndex = 0; // Reset to first page on filter
	renderTable();
	},
	getCoreRowModel: table.getCoreRowModel(),
	getSortedRowModel: table.getSortedRowModel(),
	getFilteredRowModel: table.getFilteredRowModel(),
	getPaginationRowModel: table.getPaginationRowModel(),
	});

	// Render table function
	function renderTable() {
	// Show loading indicator
	document.getElementById('loadingIndicator').classList.remove('hidden');
	document.getElementById('dataTable').classList.add('opacity-50');

	// Simulate loading delay
	setTimeout(() => {
	// Get filtered/sorted/paginated data
	const headerGroups = tableInstance.getHeaderGroups();
	const rowModel = tableInstance.getRowModel();

	console.log('Row model rows:', rowModel.rows); // Debugging

	// Render header
	const headerRow = document.getElementById('tableHeader');
	headerRow.innerHTML = '';

	headerGroups[0].headers.forEach(header => {
	const th = document.createElement('th');
	th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
	th.style.width = `${header.getSize()}px`;

	const canSort = header.column.getCanSort();

	if (canSort) {
	th.className += ' cursor-pointer hover:bg-gray-100';
	th.onclick = header.column.getToggleSortingHandler();
	}

	const sortDirection = header.column.getIsSorted();
	let sortIcon = '';

	if (sortDirection === 'asc') {
	sortIcon = '<i class="fas fa-sort-up ml-1"></i>';
	} else if (sortDirection === 'desc') {
	sortIcon = '<i class="fas fa-sort-down ml-1"></i>';
	} else if (canSort) {
	sortIcon = '<i class="fas fa-sort ml-1 text-gray-300"></i>';
	}

	th.innerHTML = `<div class="flex items-center">${header.column.columnDef.header}${sortIcon}</div>`;
	headerRow.appendChild(th);
	});

	// Render body
	const tableBody = document.getElementById('tableBody');
	tableBody.innerHTML = '';

	rowModel.rows.forEach(row => {
	const tr = document.createElement('tr');
	tr.className = 'animate-row-hover';

	row.getVisibleCells().forEach(cell => {
	const td = document.createElement('td');
	td.className = 'px-6 py-4 whitespace-nowrap';
	td.innerHTML = cell.column.columnDef.cell(cell);
	tr.appendChild(td);
	});

	tableBody.appendChild(tr);
	});

	// Update pagination info
	const pageCount = tableInstance.getPageCount();
	const currentPage = tableInstance.getState().pagination.pageIndex;
	const pageSize = tableInstance.getState().pagination.pageSize;
	const totalItems = tableInstance.getFilteredRowModel().rows.length;

	document.getElementById('showingFrom').textContent = (currentPage * pageSize) + 1;
	document.getElementById('showingTo').textContent = Math.min((currentPage + 1) * pageSize, totalItems);
	document.getElementById('totalItems').textContent = totalItems;

	// Render pagination buttons
	const pageNumbers = document.getElementById('pageNumbers');
	pageNumbers.innerHTML = '';

	const maxVisiblePages = 5;
	let startPage = Math.max(0, currentPage - Math.floor(maxVisiblePages / 2));
	let endPage = Math.min(pageCount - 1, startPage + maxVisiblePages - 1);

	if (endPage - startPage + 1 < maxVisiblePages) {
	startPage = Math.max(0, endPage - maxVisiblePages + 1);
	}

	// Always show first page if not visible
	if (startPage > 0) {
	const firstPageBtn = document.createElement('button');
	firstPageBtn.className = `px-3 py-1 border rounded-md ${currentPage === 0 ? 'bg-blue-100 border-blue-300' : ''}`;
	firstPageBtn.textContent = '1';
	firstPageBtn.onclick = () => tableInstance.setPageIndex(0);
	pageNumbers.appendChild(firstPageBtn);

	if (startPage > 1) {
	const ellipsis = document.createElement('span');
	ellipsis.className = 'px-2';
	ellipsis.textContent = '...';
	pageNumbers.appendChild(ellipsis);
	}
	}

	for (let i = startPage; i <= endPage; i++) {
	const pageBtn = document.createElement('button');
	pageBtn.className = `px-3 py-1 border rounded-md ${currentPage === i ? 'bg-blue-100 border-blue-300' : ''}`;
	pageBtn.textContent = i + 1;
	pageBtn.onclick = () => tableInstance.setPageIndex(i);
	pageNumbers.appendChild(pageBtn);
	}

	// Always show last page if not visible
	if (endPage < pageCount - 1) {
	if (endPage < pageCount - 2) {
	const ellipsis = document.createElement('span');
	ellipsis.className = 'px-2';
	ellipsis.textContent = '...';
	pageNumbers.appendChild(ellipsis);
	}

	const lastPageBtn = document.createElement('button');
	lastPageBtn.className = `px-3 py-1 border rounded-md ${currentPage === pageCount - 1 ? 'bg-blue-100 border-blue-300' : ''}`;
	lastPageBtn.textContent = pageCount;
	lastPageBtn.onclick = () => tableInstance.setPageIndex(pageCount - 1);
	pageNumbers.appendChild(lastPageBtn);
	}

	// Update pagination button states
	document.getElementById('firstPage').disabled = currentPage === 0;
	document.getElementById('prevPage').disabled = currentPage === 0;
	document.getElementById('nextPage').disabled = currentPage >= pageCount - 1;
	document.getElementById('lastPage').disabled = currentPage >= pageCount - 1;

	// Hide loading indicator
	document.getElementById('loadingIndicator').classList.add('hidden');
	document.getElementById('dataTable').classList.remove('opacity-50');
	}, 300);
	}

	// Initial render
	console.log('Initial data:', data); // Debugging
	console.log('Table instance:', tableInstance); // Debugging
	renderTable();

	// Event listeners
	document.getElementById('searchInput').addEventListener('input', (e) => {
	tableInstance.setGlobalFilter(e.target.value);
	});

	document.getElementById('statusFilter').addEventListener('change', (e) => {
	if (e.target.value === 'all') {
	tableInstance.setColumnFilters(tableState.columnFilters.filter(f => f.id !== 'status'));
	} else {
	tableInstance.setColumnFilters([
	...tableState.columnFilters.filter(f => f.id !== 'status'),
	{ id: 'status', value: e.target.value }
	]);
	}
	});

	// Department pill tabs event delegation
	document.addEventListener('click', (e) => {
	if (e.target.closest('.department-pill')) {
	const dept = e.target.closest('.department-pill').getAttribute('data-dept');

	// Update active state
	document.querySelectorAll('.department-pill').forEach(btn => {
	btn.classList.remove('bg-blue-600', 'text-white');
	btn.classList.add(btn.classList.contains('bg-blue-100') ? 'bg-blue-100' :
	btn.classList.contains('bg-purple-100') ? 'bg-purple-100' :
	btn.classList.contains('bg-green-100') ? 'bg-green-100' :
	btn.classList.contains('bg-pink-100') ? 'bg-pink-100' :
	btn.classList.contains('bg-yellow-100') ? 'bg-yellow-100' :
	btn.classList.contains('bg-indigo-100') ? 'bg-indigo-100' :
	btn.classList.contains('bg-red-100') ? 'bg-red-100' : 'bg-gray-100');
	});

	if (dept === 'all') {
	tableInstance.setColumnFilters(tableState.columnFilters.filter(f => f.id !== 'department'));
	} else {
	e.target.closest('.department-pill').classList.remove('bg-blue-100', 'bg-purple-100', 'bg-green-100', 'bg-pink-100', 'bg-yellow-100', 'bg-indigo-100', 'bg-red-100', 'bg-gray-100');
	e.target.closest('.department-pill').classList.add('bg-blue-600', 'text-white');
	tableInstance.setColumnFilters([
	...tableState.columnFilters.filter(f => f.id !== 'department'),
	{ id: 'department', value: dept }
	]);
	}
	}
	});

	document.getElementById('rowsPerPage').addEventListener('change', (e) => {
	tableInstance.setPageSize(Number(e.target.value));
	});

	document.getElementById('firstPage').addEventListener('click', () => {
	tableInstance.setPageIndex(0);
	});

	document.getElementById('prevPage').addEventListener('click', () => {
	tableInstance.previousPage();
	});

	document.getElementById('nextPage').addEventListener('click', () => {
	tableInstance.nextPage();
	});

	document.getElementById('lastPage').addEventListener('click', () => {
	tableInstance.setPageIndex(tableInstance.getPageCount() - 1);
	});

	// Modal functionality
	const modal = document.getElementById('employeeModal');
	const addEmployeeBtn = document.getElementById('addEmployeeBtn');
	const closeModal = document.getElementById('closeModal');
	const cancelBtn = document.getElementById('cancelBtn');
	const employeeForm = document.getElementById('employeeForm');

	let currentEditId = null;

	function openModal(employee = null) {
	if (employee) {
	document.getElementById('modalTitle').textContent = 'Edit Employee';
	document.getElementById('name').value = employee.name;
	document.getElementById('position').value = employee.position;
	document.getElementById('department').value = employee.department;
	document.getElementById('status').value = employee.status;
	currentEditId = employee.id;
	} else {
	document.getElementById('modalTitle').textContent = 'Add Employee';
	employeeForm.reset();
	currentEditId = null;
	}
	modal.classList.remove('hidden');
	}

	function closeModalHandler() {
	modal.classList.add('hidden');
	}

	addEmployeeBtn.addEventListener('click', () => openModal());
	closeModal.addEventListener('click', closeModalHandler);
	cancelBtn.addEventListener('click', closeModalHandler);

	// Handle form submission
	employeeForm.addEventListener('submit', (e) => {
	e.preventDefault();

	const newEmployee = {
	id: currentEditId \|\| Math.max(...tableState.data.map(e => e.id)) + 1,
	name: document.getElementById('name').value,
	position: document.getElementById('position').value,
	department: document.getElementById('department').value,
	status: document.getElementById('status').value,
	joinDate: new Date().toISOString().split('T')[0],
	};

	if (currentEditId) {
	// Update existing employee
	const index = tableState.data.findIndex(e => e.id === currentEditId);
	if (index !== -1) {
	tableState.data[index] = newEmployee;
	}
	} else {
	// Add new employee
	tableState.data.unshift(newEmployee);
	}

	// Reset table state and render
	tableState.pagination.pageIndex = 0;
	tableInstance.setData([...tableState.data]);
	renderTable();

	closeModalHandler();
	});

	// Handle edit and delete buttons (delegated events)
	document.addEventListener('click', (e) => {
	// Edit button
	if (e.target.closest('.edit-btn')) {
	const id = parseInt(e.target.closest('.edit-btn').getAttribute('data-id'));
	const employee = tableState.data.find(e => e.id === id);
	if (employee) {
	openModal(employee);
	}
	}

	// Delete button
	if (e.target.closest('.delete-btn')) {
	const id = parseInt(e.target.closest('.delete-btn').getAttribute('data-id'));
	if (confirm('Are you sure you want to delete this employee?')) {
	tableState.data = tableState.data.filter(e => e.id !== id);
	tableInstance.setData([...tableState.data]);
	renderTable();
	}
	}
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=etrano/zz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>