MediDash uses ngx-datatable to display data in a clear and organized manner. This guide will walk you through the process of creating a basic ngx-datatable, including the necessary HTML structure and component-side code.

To get started, you need to install the ngx-datatable package using npm:

npm install @swimlane/ngx-datatable --save

Next, you need to include the ngx-datatable CSS files in your angular.json file:

"styles": [
    "src/styles.scss",
    "./node_modules/@swimlane/ngx-datatable/index.css",
    "./node_modules/@swimlane/ngx-datatable/themes/material.css",
    "./node_modules/@swimlane/ngx-datatable/assets/icons.css"
],

Now, you need to import the NgxDatatableModule into your application module's imports:

import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
    imports: [
        NgxDatatableModule,
        // ...
    ],
    // ...
})

The following HTML code demonstrates how to create a basic ngx-datatable:

<ngx-datatable
    class="material"
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'">
</ngx-datatable>

The following code demonstrates how to create the rows and columns in your component file:

import { Component } from '@angular/core';

@Component({
    selector: 'app-my-table',
    templateUrl: './my-table.component.html',
})
export class MyTableComponent {
    rows = [
        { name: 'John Doe', gender: 'Male', company: 'Company A' },
        { name: 'Jane Doe', gender: 'Female', company: 'Company B' },
    ];

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

For more information on using ngx-datatable, please refer to the official documentation: