The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

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!


user
Dan R 1 year ago
Angular Metronic Datatables
2 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)

 
Deleted comment
user
Faizal Author 1 year ago

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


user
Dan R 1 year ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation