Datatable columns not showing inline

Hey guys,

I might be doing something wrong since I don’t see any other posts regarding this problem, but I assume I am not since I’m experiencing this issue with a just created project as well.

I am just trying to create a data-table, but the columns are showing up underneath each other instead of next to each other.

I have simply copied the basic example that can be found in the ‘demo’ folder

@Component({
  selector: 'app-root',
  template: `
  	<div>
      <h3>Fluid Row Heights</h3>
      <datatable
        class="material"
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'">
      </datatable>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  rows = [];

  columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];

  constructor() {
    this.fetch((data) => {
      this.rows = data;
    });
  }

  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/data.json`);

    req.onload = () => {
      cb(JSON.parse(req.response));
    };

    req.send();
  }
}

but even with just a clean newly created project, with only this plugin added, the problem still occurs:

Any ideas?

[shattar]

Did you import the datatable css styles?

[amcdnl]

I’m gonna be adding this by default in next release.