Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-06 06:48:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Fixes table-search (#836)

Browse source 
* fixed table-search and able to search immediately as you type

* remove console.log
This commit is contained in:
Arpit 2021-09-27 09:08:34 +05:30 committed by GitHub
parent d5462aba22
commit cd64bf3e7c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
frontend/src/Editor/Components/Table/GlobalFilter.jsx Normal file
View file

@ -0,0 +1,53 @@
import React from 'react';
// Table Search
export const GlobalFilter = ({
preGlobalFilteredRows,
globalFilter,
useAsyncDebounce,
setGlobalFilter,
onComponentOptionChanged,
component,
serverSideSearch,
onEvent,
}) => {
const count = preGlobalFilteredRows.length;
const [value, setValue] = React.useState(globalFilter);
const onChange = useAsyncDebounce((filterValue) => {
setGlobalFilter(filterValue || undefined);
}, 200);
const handleSearchTextChange = (text) => {
setValue(text);
onChange(text);
onComponentOptionChanged(component, 'searchText', text).then(() => {
if (serverSideSearch === true) {
onEvent('onSearch', { component, data: {} });
}
});
};
return (
<div className="ms-2 d-inline-block">
Search:{' '}
<input
type="text"
className="global-search-field"
defaultValue={value || ''}
onBlur={(e) => {
handleSearchTextChange(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleSearchTextChange(e.target.value);
}
}}
onChange={(e) => onChange(e.target.value)}
placeholder={`${count} records`}
style={{
border: '0',
}}
/>
</div>
);
};

61
frontend/src/Editor/Components/Table/Table.jsx
View file

@ -21,9 +21,8 @@ import { Tags } from './Tags';
import { Radio } from './Radio';
import { Toggle } from './Toggle';
import { Datepicker } from './Datepicker';
import { GlobalFilter } from './GlobalFilter';
var _ = require('lodash');
export function Table({
id,
width,
@ -671,47 +670,6 @@ export function Table({
}
}, [state.columnResizing.isResizingColumn]);
function GlobalFilter() {
const count = preGlobalFilteredRows.length;
const [value, setValue] = React.useState(state.globalFilter);
const onChange = useAsyncDebounce((filterValue) => {
setGlobalFilter(filterValue || undefined);
}, 200);
const handleSearchTextChange = (text) => {
setValue(text);
onChange(text);
onComponentOptionChanged(component, 'searchText', text).then(() => {
if (serverSideSearch === true) {
onEvent('onSearch', { component, data: {} });
}
});
};
return (
<div className="ms-2 d-inline-block">
Search:{' '}
<input
className="global-search-field"
defaultValue={value || ''}
onBlur={(e) => {
handleSearchTextChange(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleSearchTextChange(e.target.value);
}
}}
placeholder={`${count} records`}
style={{
border: '0',
}}
/>
</div>
);
}
return (
<div
data-disabled={parsedDisabledState}
@ -726,11 +684,18 @@ export function Table({
{displaySearchBox && (
<div className="card-body border-bottom py-3 jet-data-table-header">
<div className="d-flex">
{displaySearchBox && (
<div className="ms-auto text-muted">
<GlobalFilter />
</div>
)}
<div className="ms-auto text-muted">
<GlobalFilter
preGlobalFilteredRows={preGlobalFilteredRows}
globalFilter={state.globalFilter}
useAsyncDebounce={useAsyncDebounce}
setGlobalFilter={setGlobalFilter}
onComponentOptionChanged={onComponentOptionChanged}
component={component}
serverSideSearch={serverSideSearch}
onEvent={onEvent}
/>
</div>
</div>
</div>
)}