diff --git a/CHANGELOG.md b/CHANGELOG.md index 69a40e20c..939452f4a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Fix HistogramWidget with one non-zero bucket [#901](https://github.com/CartoDB/carto-react/pull/901) - Spatial Index Sources use remote widgets calculation [#898](https://github.com/CartoDB/carto-react/pull/898) - Support for `hiddenColumnFields` parameter and `onRowClick` handler for Table Widget [#900](https://github.com/CartoDB/carto-react/pull/900) +- Support for `searchText` and `searchColumn` for Table Widget [#900](https://github.com/CartoDB/carto-react/pull/902) ## 3.0.0 diff --git a/packages/react-api/src/api/model.js b/packages/react-api/src/api/model.js index cc0830144..1541bb2e5 100644 --- a/packages/react-api/src/api/model.js +++ b/packages/react-api/src/api/model.js @@ -90,7 +90,7 @@ export function executeModel(props) { source: data, params: JSON.stringify(params), queryParameters, - filters: JSON.stringify(filters), + filters: JSON.stringify({ ...filters, ...props.searchFilter }), filtersLogicalOperator }; diff --git a/packages/react-widgets/src/models/TableModel.js b/packages/react-widgets/src/models/TableModel.js index db43ad81b..331eedf12 100644 --- a/packages/react-widgets/src/models/TableModel.js +++ b/packages/react-widgets/src/models/TableModel.js @@ -29,13 +29,14 @@ function formatResult(res) { // From remote function fromRemote(props) { - const { source, spatialFilter, abortController, ...params } = props; + const { source, spatialFilter, searchFilter, abortController, ...params } = props; const { columns, sortBy, sortDirection, page, rowsPerPage } = params; return _executeModel({ model: 'table', source, spatialFilter, + searchFilter, params: { column: columns, sortBy, diff --git a/packages/react-widgets/src/widgets/TableWidget.js b/packages/react-widgets/src/widgets/TableWidget.js index 729d1d3e1..9705b7196 100644 --- a/packages/react-widgets/src/widgets/TableWidget.js +++ b/packages/react-widgets/src/widgets/TableWidget.js @@ -27,6 +27,8 @@ import { _FeatureFlags, _hasFeatureFlag } from '@carto/react-core'; * @param {boolean=} [props.stableHeight] - If specified, error and no-data state will maintain same height as normal widget in loading/loaded state. * @param {boolean} [props.dense] - Whether the table should use a compact layout with smaller cell paddings. * @param {number} [props.pageSize] - Number of rows per page. This is used to manage internal state externally. + * @param {string} [props.searchText] - Text to search in the table + * @param {string} [props.searchColumn] - Column used to perform the search, using the searchText property */ function TableWidget({ @@ -46,6 +48,8 @@ function TableWidget({ height, stableHeight, dense, + searchText, + searchColumn, // Internal state pageSize }) { @@ -55,6 +59,7 @@ function TableWidget({ const [sortBy, setSortBy] = useState(undefined); const [sortByColumnType, setSortByColumnType] = useState(undefined); const [sortDirection, setSortDirection] = useState('asc'); + const containsStringSearchFilter = searchColumn && searchText; const { data = { rows: [], totalCount: 0, hasData: false }, @@ -65,6 +70,9 @@ function TableWidget({ dataSource, params: { columns: [...columns.map((c) => c.field), ...hiddenColumnFields], + searchFilter: containsStringSearchFilter && { + [searchColumn]: { stringSearch: { values: [searchText] } } + }, sortBy, sortDirection, sortByColumnType, @@ -153,6 +161,8 @@ TableWidget.propTypes = { height: PropTypes.string, stableHeight: PropTypes.bool, dense: PropTypes.bool, + searchText: PropTypes.string, + searchColumn: PropTypes.string, // Internal state pageSize: PropTypes.number };