🕸️EzyTables HTML Wrapper
Simplify you data management with ezytables wrapper.
Building a native HTML table that utilizes the core features of ezytables without a lot of overheads is absolutely amazing. Look at the example below to get a sense.
<!doctype html>
<html>
<head>
<title>EasyTables Example</title>
</head>
<body>
<table id="ezy-table">
<thead>
<tr>
<th data-name="name" data-label="Name"></th>
<th data-name="description" data-label="Description"></th>
<th data-name="status" data-label="Status"></th>
<th data-name="date" data-label="Date"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="./ezytables.iife.js"></script>
<script>
const data = [
{
name: "John Brown",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
status: "Active",
date: "2020-01-01",
},
{
name: "Jane Abram",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
status: "Active",
date: "2022-01-01",
},
{
name: "Sam Smith",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
status: "Active",
date: "2024-01-01",
},
{
name: "Ekaterina Tankova",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
status: "Active",
date: "2023-01-01",
},
{
name: "Luisa Hanes",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.",
status: "Active",
date: "2020-01-01",
},
];
const dateFormatPlugin = {
name: 'dateFormat',
field: 'date',
transform: (dateString) => {
const date = new Date(dateString);
return date.toLocaleDateString("en-US", { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' });
},
};
const easyTable = new ezytables.EzyTables({
target: "#ezy-table",
data,
plugins: [dateFormatPlugin]
});
</script>
</body>
</html>Last updated