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

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


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)

Popular Among Casual Gamers slope game appeals to casual gamers because it doesn't require tutorials, character customization, or lengthy storylines. Players can immediately start rolling down the slope and enjoy the challenge. Its accessibility has helped it remain one of the most recognizable online arcade games.

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  :(