Datagrid Examples With Group
You can groups your data with e-datagrid-group.
e-datagrid-groups
<e-datagrid>
<e-datagrid-layout-table>
<e-datagrid-groups content-key="group"></e-datagrid-groups>
<e-datagrid-column head="ID" content-key="id"></e-datagrid-column>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
</e-datagrid-layout-table>
</e-datagrid>
<script>
const generateDummyData = (length = 10) => {
const groups = ['a', 'b', 'c', 'd'];
const firstNames = ['John', 'Jane', 'Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank', 'Grace', 'Henry'];
const lastNames = ['Doe', 'Smith', 'Johnson', 'Brown', 'Davis', 'Wilson', 'Taylor', 'Anderson', 'Thomas', 'Moore'];
const getRandomName = () => {
let randomIndex = Math.floor(Math.random() * firstNames.length);
const firstName = firstNames[randomIndex];
randomIndex = Math.floor(Math.random() * lastNames.length);
const lastName = lastNames[randomIndex];
return [firstName, lastName].join(' ');
};
const getRandomGroup = () => {
const randomIndex = Math.floor(Math.random() * groups.length);
return groups[randomIndex];
};
const dummyData = [];
for (let i = 0; i < length; i++) {
dummyData.push({
id: i,
group: getRandomGroup(),
name: getRandomName(),
});
}
return dummyData;
};
const data = generateDummyData();
document.querySelector('e-datagrid').data = data;
</script><e-datagrid layout="card">
<e-datagrid-layout-table>
<e-datagrid-groups content-key="group"></e-datagrid-groups>
<e-datagrid-column head="ID" content-key="id"></e-datagrid-column>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
</e-datagrid-layout-table>
<e-datagrid-layout-card>
<e-datagrid-groups content-key="group"></e-datagrid-groups>
<e-datagrid-column head="ID" content-key="id"></e-datagrid-column>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
</e-datagrid-layout-card>
</e-datagrid>
<script>
const generateDummyData = (length = 10) => {
const groups = ['a', 'b', 'c', 'd'];
const firstNames = ['John', 'Jane', 'Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank', 'Grace', 'Henry'];
const lastNames = ['Doe', 'Smith', 'Johnson', 'Brown', 'Davis', 'Wilson', 'Taylor', 'Anderson', 'Thomas', 'Moore'];
const getRandomName = () => {
let randomIndex = Math.floor(Math.random() * firstNames.length);
const firstName = firstNames[randomIndex];
randomIndex = Math.floor(Math.random() * lastNames.length);
const lastName = lastNames[randomIndex];
return [firstName, lastName].join(' ');
};
const getRandomGroup = () => {
const randomIndex = Math.floor(Math.random() * groups.length);
return groups[randomIndex];
};
const dummyData = [];
for (let i = 0; i < length; i++) {
dummyData.push({
id: i,
group: getRandomGroup(),
name: getRandomName(),
});
}
return dummyData;
};
const data = generateDummyData();
document.querySelector('e-datagrid').data = data;
</script>with custom groups [groups]
<e-datagrid>
<e-datagrid-layout-table>
<e-datagrid-groups content-key="group" groups='[{"value": "b", "label": "Beta Group" }, {"value": "a", "label": "Alpha Group"}]'></e-datagrid-groups>
<e-datagrid-column head="ID" content-key="id"></e-datagrid-column>
<e-datagrid-column head="Name" content-key="name"></e-datagrid-column>
</e-datagrid-layout-table>
</e-datagrid>
<script>
const generateDummyData = (length = 10) => {
const groups = ['a', 'b', 'c'];
const firstNames = ['John', 'Jane', 'Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank', 'Grace', 'Henry'];
const lastNames = ['Doe', 'Smith', 'Johnson', 'Brown', 'Davis', 'Wilson', 'Taylor', 'Anderson', 'Thomas', 'Moore'];
const getRandomName = () => {
let randomIndex = Math.floor(Math.random() * firstNames.length);
const firstName = firstNames[randomIndex];
randomIndex = Math.floor(Math.random() * lastNames.length);
const lastName = lastNames[randomIndex];
return [firstName, lastName].join(' ');
};
const getRandomGroup = () => {
const randomIndex = Math.floor(Math.random() * groups.length);
return groups[randomIndex];
};
const dummyData = [];
for (let i = 0; i < length; i++) {
dummyData.push({
id: i,
group: getRandomGroup(),
name: getRandomName(),
});
}
return dummyData;
};
const data = generateDummyData();
document.querySelector('e-datagrid').data = data;
</script>