<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-filter-select label="Name" content-key="name"></e-datagrid-filter-select>
    <e-datagrid-filter-select label="Surname" content-key="surname" advanced></e-datagrid-filter-select>
  </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>
  <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-filter-select label="Name" content-key="name"></e-datagrid-filter-select>
    <e-datagrid-filter-select label="Surname" content-key="surname" advanced></e-datagrid-filter-select>
  </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>

<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>

<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>

<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>