Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimise table search for large datasets #379

Merged
merged 2 commits into from
Oct 30, 2024
Merged

Optimise table search for large datasets #379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77d1103
Merge pull request #374 from mkocansey/development
mkocansey Oct 22, 2024
aec7032
Refactored including and excluding of table columns
mkocansey Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions public/js/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -523,36 +523,37 @@ var togglePassword = (element, mode) => {
*/
const partition = (arr, fn) => {
return arr.reduce(
(acc, val, i, arr) => {
acc[fn(val, i, arr) ? 0 : 1].push(val);
return acc;
},
[[], []]
(acc, val, i, arr) => {
acc[fn(val, i, arr) ? 0 : 1].push(val);
return acc;
},
[[], []]
);
}

/**
* Filter a table based on keyword.
* @param {string} keyword - The keyword to filter table by.
* @param {string} table - The css class (name) of the table to filter.
* @param {string} field - The field to search.
* @param {null} field - The field to search.
* @param {array} tableData - The data to filter
* @return {void}
*/
var filterTable = (keyword, table, field) => {
var filterTable = (keyword, table, field, tableData) => {
const [showList, hideList] = partition(tableData, (row) => {
if (field){
if (field) {
return row[field].toLowerCase().match(keyword.toLowerCase());
} else {
return Object.values(row).toString().match(keyword.toLowerCase());
return Object.values(row).toString().toLowerCase().match(keyword.toLowerCase());
}
});

hideList.forEach( (row) => {
hideList.forEach((row) => {
hide(domEl(`${table} tbody tr[data-id='${row.id}']`), true);
});
showList.forEach( (row) => {
const elem = domEl(`${table} tbody tr[data-id='${row.id}'].hidden`);
if (elem){
showList.forEach((row) => {
const elem = domEl(`${table} tbody tr[data-id='${row.id}']`);
if (elem) {
unhide(elem, true);
}
});
Expand All @@ -567,19 +568,20 @@ var filterTable = (keyword, table, field) => {
* @return {function} - The debounced search function to be run
*/
let debounceTimerId;
const filterTableDebounced = (keyword, table, field = null, delay = 0, minLength = 0) => {
const filterTableDebounced = (keyword, table, field = null, delay = 0, minLength = 0, tableData = {}) => {
if (keyword.length >= minLength) {
return (...args) => {
clearTimeout(debounceTimerId);
debounceTimerId = setTimeout( () => filterTable(keyword, table, field), delay);
debounceTimerId = setTimeout(() => filterTable(keyword, table, field, tableData), delay);
};
} else {
return (...args) => {
clearTimeout(debounceTimerId);
debounceTimerId = setTimeout( () => {
debounceTimerId = setTimeout(() => {
document.querySelectorAll(`${table} tbody tr.hidden`).forEach((tr) => {
unhide(tr, true);
});}, delay);
});
}, delay);
};
}
};
Expand Down
56 changes: 33 additions & 23 deletions resources/views/components/table.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,21 +79,24 @@

if (!is_null($data)) {
$data = (!is_array($data)) ? json_decode(str_replace('"', '"', $data), true) : $data;

$total_records = count($data);
$table_headings = ($total_records > 0) ? array_keys((array) $data[0]) : [];
$table_headings = $all_table_headings = ($total_records > 0) ? array_keys((array) $data[0]) : [];

if( !empty($include_columns) ) {
$exclude_columns = [];
$table_headings = explode(',', str_replace(' ','', $include_columns));
}

if(!empty($exclude_columns)) {
/*if(!empty($exclude_columns)) {
$table_headings = array_filter($table_headings,
function($column) use ( $exclude_columns) {
if(!in_array($column, $exclude_columns)) return $column;
});
}
*/

if( !empty($include_columns) ) {
$table_headings = explode(',', str_replace(' ','', $include_columns));
}

if (!empty($exclude_columns) || !empty($include_columns)) {
/*if (!empty($exclude_columns) || !empty($include_columns)) {
// Filter out the $data object keys where they aren't in the table_headings list
$filteredData = [];
foreach ($data as $row) {
Expand All @@ -103,13 +106,13 @@ function($column) use ( $exclude_columns) {
}
$filteredData[] = $filteredRow;
}

$data = $filteredData;
unset($filteredData);
}
}*/

// Ensure each row in $data has a unique ID
if (!in_array('id',$table_headings)){
if (!in_array('id', $all_table_headings)){
foreach ($data as &$row){
$row['id'] = uniqid();
}
Expand Down Expand Up @@ -143,7 +146,7 @@ function build_click($click, $row_data){
}
@endphp
<script>
let tableData = {!! json_encode($data) !!};
let tableData_{{str_replace('-','_', $name)}} = {!! json_encode($data) !!};
</script>
<div class="@if($has_border && !$celled) border border-gray-200/70 dark:border-dark-700/60 @endif border-collapse max-w-full">
<div class="w-full">
Expand All @@ -152,15 +155,14 @@ function build_click($click, $row_data){
<x-bladewind::input
name="bw-search-{{$name}}"
placeholder="{{$search_placeholder}}"
onInput="filterTableDebounced(this.value, 'table.{{$name}}', '{{$search_field}}', {{$search_debounce}}, {{$search_min_length}})();"
onInput="filterTableDebounced(this.value, 'table.{{$name}}', '{{$search_field}}', {{$search_debounce}}, {{$search_min_length}}, tableData_{{str_replace('-','_', $name)}})();"
add_clearing="false"
class="!mb-0 focus:!border-slate-300 !pl-9 !py-3"
clearable="true"
prefix_is_icon="true"
prefix="magnifying-glass"/>
</div>
@endif

<table class="bw-table w-full {{$name}} @if($has_shadow) drop-shadow shadow shadow-gray-200/70 dark:shadow-md dark:shadow-dark-950/20 @endif
@if($divided) divided @if($divider=='thin') thin @endif @endif @if($striped) striped @endif @if($celled) celled @endif
@if($hover_effect) with-hover-effect @endif @if($compact) compact @endif @if($uppercasing) uppercase-headers @endif
Expand All @@ -184,9 +186,11 @@ class="!mb-0 focus:!border-slate-300 !pl-9 !py-3"
}
@endphp
@foreach($table_headings as $th)
<th>{{ str_replace('_', ' ', $column_aliases[$th] ?? $th ) }}</th>
@if(empty($exclude_columns) || (!empty($exclude_columns) && !in_array($th, $exclude_columns)))
<th>{{ str_replace('_', ' ', $column_aliases[$th] ?? $th ) }}</th>
@endif
@endforeach
@if( !empty($action_icons))
@if(!empty($action_icons))
<th class="!text-right">{{$actions_title}}</th>
@endif
</tr>
Expand All @@ -204,10 +208,12 @@ class="!mb-0 focus:!border-slate-300 !pl-9 !py-3"
});
@endphp
@foreach($grouped_data as $row)
<tr data-id="{{ $row['id'] ?? uniqid() }}">
@php $row_id = $row['id']; @endphp
<tr data-id="{{ $row_id }}">
@foreach($table_headings as $th)
@if($th !== $groupby)
<td data-row-id="{{ $row['id'] ?? uniqid() }}" data-column="{{ $th }}" >{!! $row[$th] !!}</td>
<td data-row-id="{{ $row_id }}"
data-column="{{ $th }}">{!! $row[$th] !!}</td>
@endif
@endforeach
<x-bladewind::table-icons :icons_array="$icons_array" :row="$row"/>
Expand All @@ -216,12 +222,16 @@ class="!mb-0 focus:!border-slate-300 !pl-9 !py-3"
@endforeach
@else
@foreach($data as $row)
<tr data-id="{{ $row['id'] ?? uniqid() }}">
@foreach($table_headings as $th)
<td data-row-id="{{ $row['id'] ?? uniqid() }}" data-column="{{ $th }}" >{!! $row[$th] !!}</td>
@endforeach
<x-bladewind::table-icons :icons_array="$icons_array" :row="$row"/>
</tr>
@php $row_id = $row['id']; @endphp
@if(empty($exclude_columns) || (!empty($exclude_columns) && !in_array($th, $exclude_columns)))
<tr data-id="{{ $row_id }}">
@foreach($table_headings as $th)
<td data-row-id="{{ $row_id }}"
data-column="{{ $th }}">{!! $row[$th] !!}</td>
@endforeach
<x-bladewind::table-icons :icons_array="$icons_array" :row="$row"/>
</tr>
@endif
@endforeach
@endif
@else
Expand Down