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)
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">
<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" class="text-gray-800 text-hover-primary mb-1">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="#" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">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" class="menu-link px-3">Edit</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-kt-users-table-filter="delete_row">Delete</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</td>
<!--end::Action=-->
</tr>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();
}
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
