Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Datatable styles in Angular app


Hi everyone,

I'm working on an Angular (v18.2.11) project using Metronic v9.1.1, and I'm having trouble getting the datatable component to display correctly. I'm following the documentation here, but the styling in my application doesn't match the demo or the component overview. Specifically, there is no spacing inside the columns.

I've initialized the datatable component in my angular component, but the styles still aren't applying. Has anyone else encountered this issue or have any suggestions on what I might be missing?

Thanks in advance!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


For alternating row colors, the best approach is using the nth-child selector in CSS: .mat-row:nth-child(even) { background-color: #f5f5f5; }. This keeps the styles clean and scalable. As for structuring styles, it’s better to keep them in a separate SCSS file rather than inline styles to maintain consistency and ease of maintenance. If you're working on a broader project and need a seamless UI across your web platform, it might be worth considering a professional solution. A corporate website development service can help ensure your design, including tables, aligns with your brand identity while maintaining optimal performance



Hi Dan Rotaru,

Can you share some of your code, and how you're setting up the datatable and linking the styles? We will check what’s going wrong and help you fix it.

Thanks



Hello,

I have configured angular app with metronic by following steps from here: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular

Also validated the setup with the metronic-tailwind-angular starter https://github.com/keenthemes/metronic-tailwind-html-integration/tree/main/metronic-tailwind-angular

I have copied the html for datatable example from demo1, the 'Market Authors' one, with no changes to html or css.

I have a standalone angular component with the html for the datatable from demo1 and this ts code:


@Component({
selector: "my-datatable",
standalone: true,
imports: [CommonModule],
templateUrl: "./my-datatable.component.html",
styleUrl: "./my-datatable.component.scss",
})


I had to do this as the datatable was not initialized at navigation, only on refresh


ngAfterViewInit(): void {
const datatable = new window.KTDataTable(this.table.nativeElement, {
pageSize: 10,
stateSave: true,
});
}


If I do not use window. I just get a js error in the KTDataTable.init() method.

Using table-fixed instead of table-auto, makes it better but does not look like in the demo1, still looks like some styles are not working or missing.


<table class="table table-border table-fixed" data-datatable-table="true">


Please let me know if any other details are needed.

Thank you.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(