Nebular theme tables

[JonathanTurnock]

Thanks to the ngx team I have found it an excellent toolkit for my needs however I’m struggling with the tables.

I found the smart table and tree grid but in terms of a basic data table there is no component/classes or example that seems to have a consistent feel in light/dark mode.

I can use the bootstrap tables but they are not consistent with the nebular ui.

Hopefully I’m missing something simple 😊

Thanks

[Css-IanM]

I too have a need for simple tables, smart table and tree grid are more than what i need. just some classes to apply to bootstraps tables would be great.

[achunk17]

I also need references about basic tables

[sigmama]

You can create an individual style file to overwrite the bootstrap styles as below and import it in the styles.scss file.

Regarding the content, below is my implementation by copying some smart table styles that it will fit the framework theme style.

@mixin ngx-table() {
table tr th {
font-family: nb-theme(smart-table-header-font-family);
font-weight: nb-theme(smart-table-header-font-weight) * 2;
line-height: nb-theme(smart-table-header-line-height);
color: nb-theme(smart-table-header-fg);
}

table tr td {
font-family: nb-theme(smart-table-font-family);
font-weight: nb-theme(smart-table-font-weight);
line-height: nb-theme(smart-table-line-height);
color: nb-theme(smart-table-fg);

nb-select.appearance-outline.size-tiny .select-button {
  padding-left: 5px;
}

}

table tr th,
table tr td {
font-size: nb-theme(smart-table-font-size) * 0.8;
position: relative;
padding: 0.3rem 1rem; //padding: nb-theme(smart-table-padding);
border: 1px solid nb-theme(smart-table-separator);
vertical-align: middle;
}

thead,
tfoot tr {
background: nb-theme(smart-table-header-bg);
}

tfoot tr td {
padding: 0.75rem 1rem 0.75rem 1rem;
}

tbody tr {
&.selected,
&:hover {
background: nb-theme(smart-table-bg-active) !important;
}

&:nth-child(2n) {
  background-color: nb-theme(smart-table-bg-even);
}

}

.pagination {
display: inline-flex !important;
margin-bottom: 0;
}
// overwrite bootstrap styles to follow the theme styles
.page-link {
font-size: nb-theme(smart-table-font-size) * 0.8;
padding: 0.2rem 0.5rem;
background-color: nb-theme(smart-table-header-bg);
border-color: nb-theme(smart-table-separator);
}

.page-item.disabled .page-link {
background-color: nb-theme(smart-table-header-bg);
border-color: nb-theme(smart-table-separator);
}

.page-item.active .page-link {
background-color: nb-theme(button-filled-primary-background-color);
border-color: nb-theme(button-filled-primary-border-color);
}

.page-link:hover {
background-color: nb-theme(button-filled-primary-hover-background-color);
border-color: nb-theme(button-filled-primary-hover-border-color);
}
}

[mateusmedice]

You can create an individual style file to overwrite the bootstrap styles as below and import it in the styles.scss file.

Regarding the content, below is my implementation by copying some smart table styles that it will fit the framework theme style.

@mixin ngx-table() {
table tr th {
font-family: nb-theme(smart-table-header-font-family);
font-weight: nb-theme(smart-table-header-font-weight) * 2;
line-height: nb-theme(smart-table-header-line-height);
color: nb-theme(smart-table-header-fg);
}

table tr td {
font-family: nb-theme(smart-table-font-family);
font-weight: nb-theme(smart-table-font-weight);
line-height: nb-theme(smart-table-line-height);
color: nb-theme(smart-table-fg);

nb-select.appearance-outline.size-tiny .select-button {
  padding-left: 5px;
}

}

table tr th,
table tr td {
font-size: nb-theme(smart-table-font-size) * 0.8;
position: relative;
padding: 0.3rem 1rem; //padding: nb-theme(smart-table-padding);
border: 1px solid nb-theme(smart-table-separator);
vertical-align: middle;
}

thead,
tfoot tr {
background: nb-theme(smart-table-header-bg);
}

tfoot tr td {
padding: 0.75rem 1rem 0.75rem 1rem;
}

tbody tr {
&.selected,
&:hover {
background: nb-theme(smart-table-bg-active) !important;
}

&:nth-child(2n) {
  background-color: nb-theme(smart-table-bg-even);
}

}

.pagination {
display: inline-flex !important;
margin-bottom: 0;
}
// overwrite bootstrap styles to follow the theme styles
.page-link {
font-size: nb-theme(smart-table-font-size) * 0.8;
padding: 0.2rem 0.5rem;
background-color: nb-theme(smart-table-header-bg);
border-color: nb-theme(smart-table-separator);
}

.page-item.disabled .page-link {
background-color: nb-theme(smart-table-header-bg);
border-color: nb-theme(smart-table-separator);
}

.page-item.active .page-link {
background-color: nb-theme(button-filled-primary-background-color);
border-color: nb-theme(button-filled-primary-border-color);
}

.page-link:hover {
background-color: nb-theme(button-filled-primary-hover-background-color);
border-color: nb-theme(button-filled-primary-hover-border-color);
}
}

Segui seus passos, porém ainda utiliza o scss do bootstrap

[sigmama]

Did you import it in style.scss?

[MaaxGr]

Here is a step by step solution for everyone who is as confused as i was.
I'm not an angular expert, so the explaination is not obvious for me.
The comment in portuguese language didn't made it better :D

1. Create a src/app/@theme/styles/_tables.scss file with the content of @sigmama (starting with @mixin ngx-table())
2. Go to src/app/@theme/styles/styles.scss
3. Import the _tables.scss with the command @import './tables';
4. Include the created mixin with @include ngx-table(); inside the @include nb-install() block
5. Create a Test-Table:

<table>
  <tr>
    <th>Feld</th>
    <th>Alter Wert</th>
    <th>Neuer Wert</th>
  </tr>
  <tr *ngFor="let item of this.service.fieldDiffs">
    <td>{{ item['field_name'] }}</td>
    <td>{{ item['old_value'] }}</td>
    <td>{{ item['new_value'] }}</td>
  </tr>
</table>

You should now see a styled table: