Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Theme and Data Table Config


Hello,

I am using tailwind demo 10 for my laravel project, I'm using latest v9 build I would like to know how can I change the color of the borders and increase its opacity, also can you show me the available configuration for data table columns for remote data source, from Ktui docs I can only see column key title and render, where do I set sorts etc. also do you have a date on when the date picker option will be available?

Thank you


R
Ryann 8 months ago
Datatables DatePicker Tailwind 4
1 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 (1)

user
Faizal Author 8 months ago

Hi

For Metronic v9 with Tailwind CSS, you can customize border colors and opacity using Tailwind utility classes:




  






  




For remote data sources with KtUI DataTable, you have several configuration options beyond just key, title, and render:

const columns = [
  {
    key: 'name',
    title: 'Name',
    sortable: true,        // Enable/disable sorting
    searchable: true,      // Enable/disable search
    width: '200px',        // Set column width
    render: (data) => `${data}`,
  },
  {
    key: 'email',
    title: 'Email',
    sortable: false,       // Disable sorting
    searchable: true,     // Keep search enabled
    width: '300px',
    render: (data) => `${data}`,
  },
  {
    key: 'actions',
    title: 'Actions',
    sortable: false,       // Actions column typically not sortable
    searchable: false,     // Actions column typically not searchable
    width: '150px',
    render: (data, row) => `
      
      
    `,
  }
];



Unfortunately, Metronic v9 does not currently include a built-in date picker component. However, you can integrate third-party date pickers that work well with Tailwind CSS:


flatpickr.js.org
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  :(