New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
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
Replies (1)
Hi
For Metronic v9 with Tailwind CSS, you can customize border colors and opacity using Tailwind utility classes:
<!-- Example: Blue border with 50% opacity -->
<div class="border border-blue-500 border-opacity-50">
<!-- Your content here -->
</div>
<!-- Example: Custom border with different opacity levels -->
<div class="border border-gray-300 border-opacity-75">
<!-- Your content here -->
</div>
<pre>
For remote data sources with KtUI DataTable, you have several configuration options beyond just key, title, and render:
<pre>
const columns = [
{
key: "name",
title: "Name",
sortable: true, // Enable/disable sorting
searchable: true, // Enable/disable search
width: "200px", // Set column width
render: (data) => `<strong>${data}</strong>`,
},
{
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) => `
<button class="btn btn-sm btn-primary">Edit</button>
<button class="btn btn-sm btn-danger">Delete</button>
`,
}
];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
