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!
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.
