Stock table horizontally scrollable

This commit is contained in:
4lloyd 2020-11-03 21:27:51 +01:00
parent 0ebe785c42
commit e0fc7b90f5
5 changed files with 35 additions and 11 deletions

View File

@ -11,17 +11,18 @@
"bootstrap": "^4.5.2",
"bootstrap-select": "^1.13.18",
"chart.js": "^2.8.0",
"datatables.net": "^1.10.21",
"datatables.net-bs4": "^1.10.21",
"datatables.net-colreorder": "^1.5.1",
"datatables.net-colreorder-bs4": "^1.5.1",
"datatables.net": "^1.10.22",
"datatables.net-bs4": "^1.10.22",
"datatables.net-colreorder": "^1.5.2",
"datatables.net-colreorder-bs4": "^1.5.2",
"datatables.net-plugins": "^1.10.20",
"datatables.net-responsive": "^2.2.5",
"datatables.net-responsive-bs4": "^2.2.5",
"datatables.net-responsive": "^2.2.6",
"datatables.net-responsive-bs4": "^2.2.6",
"datatables.net-rowgroup": "^1.1.2",
"datatables.net-rowgroup-bs4": "^1.1.2",
"datatables.net-select": "^1.3.0",
"datatables.net-select-bs4": "^1.3.0",
"datatables.net-select": "^1.3.1",
"datatables.net-select-bs4": "^1.3.1",
"dragscroll": "^0.0.8",
"fullcalendar": "^3.10.1",
"gettext-translator": "2.1.0",
"jquery": "3.5.1",

View File

@ -337,8 +337,12 @@ input::-webkit-inner-spin-button {
display: none;
}
.dataTables_scrollBody {
overflow: visible !important;
.grab-cursor {
cursor: grab;
}
.grab-cursor:active {
cursor: grabbing;
}
/* Third party component customizations - toastr */

View File

@ -1,6 +1,7 @@
var stockOverviewTable = $('#stock-overview-table').DataTable({
'order': [[4, 'asc']],
'colReorder': false,
'scrollX': true,
'columnDefs': [
{ 'orderable': false, 'targets': 0 },
{ 'searchable': false, "targets": 0 },
@ -10,8 +11,25 @@
{ 'visible': false, 'targets': 8 }
],
});
$('#stock-overview-table').on('column-sizing.dt', function(e, settings)
{
var dtScrollWidth = $('.dataTables_scroll').width();
var stockTableWidth = $('#stock-overview-table').width();
if (dtScrollWidth < stockTableWidth)
{
$('.dataTables_scrollBody').addClass("grab-cursor");
} else
{
$('.dataTables_scrollBody').removeClass("grab-cursor");
}
});
$('#stock-overview-table tbody').removeClass("d-none");
stockOverviewTable.columns.adjust().draw();
$('.dataTables_scrollBody').addClass("dragscroll");
dragscroll.reset();
$("#location-filter").on("change", function()
{

View File

@ -695,6 +695,7 @@
@if(!empty($__t('bootstrap-select_locale') && $__t('bootstrap-select_locale') != 'x'))<script src="{{ $U('/node_modules', true) }}/bootstrap-select/dist/js/i18n/defaults-{{ $__t('bootstrap-select_locale') }}.js?v={{ $version }}"></script>@endif
<script src="{{ $U('/node_modules/jquery-lazy/jquery.lazy.min.js?v=', true) }}{{ $version }}"></script>
<script src="{{ $U('/node_modules/nosleep.js/dist/NoSleep.min.js?v=', true) }}{{ $version }}"></script>
<script src="{{ $U('/node_modules/dragscroll/dragscroll.js?v=', true) }}{{ $version }}"></script>
<script src="{{ $U('/js/extensions.js?v=', true) }}{{ $version }}"></script>
<script src="{{ $U('/js/grocy.js?v=', true) }}{{ $version }}"></script>

View File

@ -138,7 +138,7 @@
<div class="row">
<div class="col">
<table id="stock-overview-table"
class="table table-sm table-striped dt-responsive">
class="table table-sm table-striped nowrap w-100">
<thead>
<tr>
<th class="border-right"></th>