Datatable Classes
Hi
About datatable i want to use https://preview.keenthemes.com/metronic8/demo1/apps/user-management/users/list.html datatable style but coundt change tbody or tds class. Can send me example about it ? How can style it. Thx 4 help
Replies (4)
Hi Yusuf,
You may check the documentation for adding custom class in the rows.
https://yajrabox.com/docs/laravel-datatables/master/row-options#row-class
Hope this can help.
Thanks
Hi,
Please note that the datatable instance is initialized in src/js/custom/apps/user-management/users/list/table.js.
The HTML classes can be modified right in the table's HTML markup. Which element's class do you need to change?
Regards.
Hi;
Thx for answer
i wanna change th ,checkboxes, search and buttons class but couldnt set correct ->dom(). I guess coz of it couldnt make similar design.
in UsersDataTable.php
public function html()
{
return $this->builder()
->setTableId("kt_table_users")
->addCheckbox()->selectStyleMultiShift()
->columns($this->getColumns())
->addTableClass("table align-middle table-row-dashed fs-6 gy-5")
->minifiedAjax()
->dom("<"row"<"col-sm-6 d-flex align-items-center justify-conten-start"f><"col-sm-6 d-flex align-items-center justify-content-end"B>><"table-responsive"tr><"row"<"col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start"li><"col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"p>>")
->parameters([
"scrollX" => true,
"drawCallback" => "function() { KTMenu.createInstances(); }",
])
->buttons([
"extends" =>
[
"extend" => "collection",
"class" => "btn btn-light-primary me-3",
"text" => "Export",
"exportable" => false,
"printable" => false,
"searchable" => false,
"selectable" => false,
"buttons" => [
"copy",
"excel",
"csv",
"pdf",
"print"
]
],
])
->orderBy(1, "asc")
->lengthMenu()
->responsive();
}Table class = table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer
Tbody class = text-gray-600 fw-semibold
TD classes are different for each td. Here is the TR with the TD's.
<tr class="even">
<!--begin::Checkbox-->
<td>
<div class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1">
</div>
</td>
<!--end::Checkbox-->
<!--begin::User=-->
<td class="d-flex align-items-center">
<!--begin:: Avatar -->
<div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
<a href="/metronic8/demo1/../demo1/apps/user-management/users/view.html" target="_blank" rel="noopener noreferrer">
<div class="symbol-label fs-3 bg-light-warning text-warning">C</div>
</a>
</div>
<!--end::Avatar-->
<!--begin::User details-->
<div class="d-flex flex-column">
<a href="/metronic8/demo1/../demo1/apps/user-management/users/view.html%22%20class=%22text-gray-800%20text-hover-primary%20mb-1" target="_blank" rel="noopener noreferrer">Mikaela Collins</a>
<span>mik@pex.com</span>
</div>
<!--begin::User details-->
</td>
<!--end::User=-->
<!--begin::Role=-->
<td>Administrator</td>
<!--end::Role=-->
<!--begin::Last login=-->
<td data-order="2022-07-02T21:12:38-04:00">
<div class="badge badge-light fw-bold">5 days ago</div>
</td>
<!--end::Last login=-->
<!--begin::Two step=-->
<td></td>
<!--end::Two step=-->
<!--begin::Joined-->
<td data-order="2022-02-21T11:30:00-05:00">21 Feb 2022, 11:30 am</td>
<!--begin::Joined-->
<!--begin::Action=-->
<td class="text-end">
<a href="#%22%20class=%22btn%20btn-light%20btn-active-light-primary%20btn-sm%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end" target="_blank" rel="noopener noreferrer">Actions
<!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
<span class="svg-icon svg-icon-5 m-0">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor"></path>
</svg>
</span>
<!--end::Svg Icon--></a>
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="/metronic8/demo1/../demo1/apps/user-management/users/view.html%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">Edit</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-users-table-filter=%22delete_row" target="_blank" rel="noopener noreferrer">Delete</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</td>
<!--end::Action=-->
</tr>
