Table

The inevitable HTML table, with special case cells

You can create a Bulma table simply by attaching a single table CSS class on a HTML element.

To use a box component in your application, you need to import the BulmaTableModule by adding the following lines to your app.module.ts file.

import { BulmaTableModule } from 'ngx-bulma/table';

@NgModule({
  imports: [BulmaTableModule],
  // ...
})
export class AppModule {}

Basic

To use Bulma modifiers the Table component in your Angular application, add the buTable directive in the <table> tag. The <table> tag supports following type sttributes:

Directive Description
buTable For customizing a Table element


Default

<table class="table" buTable>
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
  </tbody>
</table>
OneTwo
ThreeFour

Bordered

<table class="table" buTable bordered="true">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
  </tbody>
</table>
OneTwo
ThreeFour

Striped

<table class="table" buTable striped="true">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>Seven</td>
      <td>Eight</td>
    </tr>
  </tbody>
</table>
OneTwo
ThreeFour
FiveSix
SevenEight

Hoverable

<table class="table" buTable hoverable="true">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
    <tr>
      <td>Five</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>Seven</td>
      <td>Eight</td>
    </tr>
  </tbody>
</table>
OneTwo
ThreeFour

Full Width

<table class="table" buTable fullWidth="true">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Three</td>
      <td>Four</td>
    </tr>
  </tbody>
</table>
OneTwo
ThreeFour