datatable column width

Topic: datatable column width

ammi pro asked 1 year ago

Is it possible to set column width in datatable? Any advice on how to set it up would be appreciated. Thank you.

TS:

headerTasks = [
    { label: 'Due Date', fieldName: 'dueDate', width: '50px' },
    { label: 'Group', fieldName: 'memoArea', width: '50px' },
    { label: 'Task', fieldName: 'task', width: '250px' },
    { label: 'Status', fieldName: 'taskStatus', width: '50px' },
    { label: 'Created On', fieldName: 'createdOn', width: '50px' },
    { label: 'Assigned To', fieldName: 'fullName', width: '100px' },
];

HTML:

<div class="datatable datatable-sm mt-1" >
<table
  class="table datatable-table table-hover"
  mdbTable
  mdbTableSort
  #tableClientTasks="mdbTable"
  #sortSearch="mdbTableSort"
  [dataSource]="filteredTasks"
  [sort]="sortSearch"
  [pagination]="paginationSearch"
>
  <thead class="datatable-header">
    <tr>
      <th *ngFor="let header of headerClientTasks" [mdbTableSortHeader]="header.fieldName" scope="col">
        {{ header.label | titlecase }}
      </th>
    </tr>
  </thead>
  <tbody class="datatable-body">
    <tr *ngFor="let clientTask of tableClientTasks.data; let i = index" scope="row" (click)="openTask(clientTask)">
        <td>
            {{clientTask.dueDate}}
        </td>

        <td>{{clientTask.memoArea}}</td>
        <td>
            {{clientTask.task}}
        </td>
        <td>{{clientTask.taskStatus}}</td>
        <td>{{clientTask.createdOn | date: 'MM/dd/yyyy' }}</td>

        <td>{{clientTask.fullName}}</td>
    </tr>
  </tbody>
  <tfoot *ngIf="filteredTasks?.length === 0">
    <tr>
        <td class="text-center no-results" colspan="5">No Records Found</td>
    </tr>
    </tfoot>
</table>
<mdb-table-pagination #paginationSearch></mdb-table-pagination>

Add comment

Rafał Seifert staff answered 1 year ago

0 0 Best answer

<p>Here is a sample table with applied styles that can help you :</p>

<pre class="prettyprint"><code>        <div class="datatable mt-4" style="width: 550px">
      <table
        class="table datatable-table"
        mdbTable
        mdbTableSort
        #table="mdbTable"
        #sort="mdbTableSort"
        [dataSource]="dataSource"
        [pagination]="pagination"
        [sort]="sort"
        style="table-layout: fixed"
      >
        <thead class="datatable-header">
          <tr>
            <th
              *ngFor="let header of headerTasks"
              [mdbTableSortHeader]="header.fieldName"
              scope="col"
              [ngStyle]="{ width: header.width }"
            >
              {{ header.label | titlecase }}
            </th>
          </tr>
        </thead>
        <tbody class="datatable-body">
          <tr *ngFor="let data of table.data" scope="row">
            <td>
              {{ data.name }}
            </td>
            <td>
              {{ data.position }}
            </td>
            <td>
              {{ data.office }}
            </td>
            <td>
              {{ data.age }}
            </td>
            <td>
              {{ data.startDate }}
            </td>
            <td>
              {{ data.salary }}
            </td>
          </tr>
        </tbody>
      </table>
      <mdb-table-pagination #pagination></mdb-table-pagination>
    </div>
</code></pre>

<p>Styles applied to this table:</p>

<ol>
<li><code>style="width: 550px"</code> to <code>div</code> element</li>
<li><code>style="table-layout: fixed"</code> to <code>table</code> element</li>
<li><code>[ngStyle]="{ width: header.width }"</code> to <code>th</code> element</li>
</ol>

<p>I hope that helps you style your table. Remember that our angular table is a standard html table so you can style it as any other table.</p>

Please insert min. 20 characters.

Here is a sample table with applied styles that can help you :

        <div class="datatable mt-4" style="width: 550px">
      <table
        class="table datatable-table"
        mdbTable
        mdbTableSort
        #table="mdbTable"
        #sort="mdbTableSort"
        [dataSource]="dataSource"
        [pagination]="pagination"
        [sort]="sort"
        style="table-layout: fixed"
      >
        <thead class="datatable-header">
          <tr>
            <th
              *ngFor="let header of headerTasks"
              [mdbTableSortHeader]="header.fieldName"
              scope="col"
              [ngStyle]="{ width: header.width }"
            >
              {{ header.label | titlecase }}
            </th>
          </tr>
        </thead>
        <tbody class="datatable-body">
          <tr *ngFor="let data of table.data" scope="row">
            <td>
              {{ data.name }}
            </td>
            <td>
              {{ data.position }}
            </td>
            <td>
              {{ data.office }}
            </td>
            <td>
              {{ data.age }}
            </td>
            <td>
              {{ data.startDate }}
            </td>
            <td>
              {{ data.salary }}
            </td>
          </tr>
        </tbody>
      </table>
      <mdb-table-pagination #pagination></mdb-table-pagination>
    </div>

Styles applied to this table:

style="width: 550px" to div element
style="table-layout: fixed" to table element
[ngStyle]="{ width: header.width }" to th element

I hope that helps you style your table. Remember that our angular table is a standard html table so you can style it as any other table.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: MDB5 3.0.1
Device: Desktop
Browser: Chrome
OS: W10
Provided sample code: No
Provided link: No

ammi

Pro User 92Support score
32Questions 5Answers 0Snippets