Search code examples
datagridvmware-clarity

clarity datagrid not aligning columns in angular app

Simple starter app with clarity 1.0.0. When attempting to display datagrid the following fails to align any the columns across rows.

<clr-datagrid>
  <clr-dg-column>ID</clr-dg-column>
  <clr-dg-column>First Name</clr-dg-column>
  <clr-dg-column>Last Name</clr-dg-column>
  <clr-dg-column>Email</clr-dg-column>
  <clr-dg-column>Gender</clr-dg-column>
  <clr-dg-column>IP Address</clr-dg-column>
  <clr-dg-column>Department</clr-dg-column>

  <clr-dg-row *clrDgItems="let employee of employees">
    <clr-dg-cell>{{employee.id}}</clr-dg-cell>
    <clr-dg-cell>{{employee.first_name}}</clr-dg-cell>
    <clr-dg-cell>{{employee.last_name}}</clr-dg-cell>
    <clr-dg-cell>{{employee.email}}</clr-dg-cell>
    <clr-dg-cell>{{employee.ip_address}}</clr-dg-cell>
    <clr-dg-cell>{{employee.department}}</clr-dg-cell>
  </clr-dg-row>
  <clr-dg-footer><clr-dg-footer>
    <clr-dg-pagination #pagination [clrDgPageSize]="10">
      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Employees per page</clr-dg-page-size>
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      of {{pagination.totalItems}} users
    </clr-dg-pagination>
  </clr-dg-footer></clr-dg-footer>
</clr-datagrid>

enter image description here

Solution

  • It appears you have an extra column declared but no corresponding cell for it. This should work for you.

        <clr-datagrid>
      <clr-dg-column>ID</clr-dg-column>
      <clr-dg-column>First Name</clr-dg-column>
      <clr-dg-column>Last Name</clr-dg-column>
      <clr-dg-column>Email</clr-dg-column>
      <clr-dg-column>Gender</clr-dg-column>
      <clr-dg-column>IP Address</clr-dg-column>
      <clr-dg-column>Department</clr-dg-column>

      <clr-dg-row *clrDgItems="let employee of employees">
        <clr-dg-cell>{{employee.id}}</clr-dg-cell>
        <clr-dg-cell>{{employee.first_name}}</clr-dg-cell>
        <clr-dg-cell>{{employee.last_name}}</clr-dg-cell>
        <clr-dg-cell>{{employee.email}}</clr-dg-cell>
<clr-dg-cell>{{employee.gender}}</clr-dg-cell>
        <clr-dg-cell>{{employee.ip_address}}</clr-dg-cell>
        <clr-dg-cell>{{employee.department}}</clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>

    Here is a stackblitz with it running.