What is the best way to reset the column filter cell in Material-Table?

Within my Material-Table, I am utilizing this unique TextField to craft a specialized filter cell for each column.

My goal is to employ the endAdornment as a button that will reset the filter, but I am struggling with removing the current value.

filterComponent: ({ columnDef, onFilterChanged }) => (
    <TextField
        onChange={(e) => {
            onFilterChanged(columnDef.tableData.id, e.target.value);
        }}
        InputProps={{
            startAdornment: (
                <InputAdornment position="start">
                    <FilterList />
                </InputAdornment>
            ),
            endAdornment: (
                <InputAdornment position="end">
                    <IconButton>
                        <Clear className={classes.endAdornment} />
                    </IconButton>
                </InputAdornment>
            ),
        }}
    />
),
javascriptmaterial-uimaterial-table

Answer №1

Upon reviewing the code snippet you provided, it appears that the filters are set using the function below. This function requires the columnID and value as parameters.

onFilterChanged(columnDef.tableData.id, e.target.value);

You might want to consider integrating this functionality into the IconButton component as well:

endAdornment: (
                <InputAdornment position="end">
                    <IconButton onClick={() => onFilterChanged(columnDef.tableData.id, '')}>
                        <Clear className={classes.endAdornment} />
                    </IconButton>
                </InputAdornment>
            ),

Note: Updated with controlled value

filterComponent: ({ columnDef, onFilterChanged }) => (
    <TextField
        value={columnDef.tableData.filterValue}
        onChange={(e) => {
            onFilterChanged(columnDef.tableData.id, e.target.value);
        }}
        InputProps={{
            startAdornment: (
                <InputAdornment position="start">
                    <FilterList />
                </InputAdornment>
            ),
            endAdornment: (
                <InputAdornment position="end">
                    <IconButton onClick={() => onFilterChanged(columnDef.tableData.id, '')}>
                        <Clear className={classes.endAdornment} />
                    </IconButton>
                </InputAdornment>
            ),
        }}
    />
),

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to convert a recordset to an array using React?

I'm attempting to create an array by retrieving data from a SQL recordset: +------------+------------+------------+ | start_type | field_name | start_text | +------------+------------+------------+ | 0 | Field1 | some text. | +----------- ...

javascriptreactjstypescript

Auto-collapse sidebar upon clicking anywhere on the page

I have a dynamic sidebar that appears when the user clicks on a hamburger button. Here is the layout: $('#nav-toggle').click(function() { if($('#nav-toggle').hasClass('active')){ $('.menu').animate({ r ...

javascriptjqueryhtmlcss

Achieving two-way data binding using a Service in AngularJS - Step by step guide

Searching a JSON file, extracting data to create a table, and continuously monitoring for updates to display in real-time is a challenging task. Despite multiple attempts with AngularJS, achieving this has been elusive. Below is the code snippet: app.js ...

javascriptphpangularjsjsondata-binding

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

javascriptcssajaxparallel-processing

Does it follow standard practice for Array.filter to have the capability to also perform mapping on an array of objects?

While experimenting with Array.filter, I made an interesting discovery. By forgetting to include an equality check, my array was unexpectedly mapped instead of filtered. Here is the code snippet that led to this result: const x = [{ name: 'user' ...

javascripttypescriptecmascript-6filter

Managing Visual Studio Code Extension Intellisense: A Guide

I am looking to create an extension I recommend using "CompletionList" for users. Users can trigger completion by running "editor.action.triggerSuggest" The process of my extensions is as follows: Users input text If they press the "completion command," ...

javascripttypescriptvisual-studio-codevscode-extensions

The query in the Mongo shell is not functioning as expected when used with mongoose

I have crafted a shell query that functions flawlessly when executed on mongo shell, but does not yield any results when run using mongoose in nodejs + typescript; Mongo shell db.userworks.aggregate([ { $match: { user: ObjectId("6 ...

javascriptnode.jsmongodbmongoosemongodb-query

Guide on creating a project for developing an npm package

Within my git root project, I am utilizing a git subproject called UIComponents. For instance, my main project is named MyApp and the subproject is UIComponents. Currently, I have cloned the UIComponents repository inside my project folder and added UIComp ...

javascriptnode.jsnpmyarnpkg

Javascript textfield button function malfunctioning

Here is the code I have created: HTML: <form method="post" id="myemailform" name="myemailform" action="form-to-email.php"> <div id="form_container"> <label class="descriptio ...

javascriptjqueryhtml

A guide to integrating server-side rendering for Material UI's media queries in NextJs

I'm having trouble following the instructions for implementing Material UI's media queries because they are designed for a basic React application and I am working with NextJs. Specifically, I'm not sure where to place the code provided in t ...

reactjsmaterial-uinext.jsserver-side-rendering

How can an object inside an array be destructured in just one line?

Consider the following array: const array = [{b:2}] Can you extract the value of b using destructuring in just one line? I attempted something similar to this approach, but it did not yield the desired result: const [{b} = array] ...

javascriptecmascript-6destructuring

Apply SetTimeout exclusively for desktop devices

A website I'm working on has a background video from YouTube using YTPlayer. To enhance the user experience, I have implemented a CSS spinner that displays while the page is loading. However, I noticed that the spinner disappears before the video fini ...

javascriptjqueryhtmlcss

Disabling the range selection in the mat-date-range-picker when the date is disabled

I am trying to use the mat-date-range-picker feature to prevent users from selecting a date range that includes disabled dates. In the provided example (available at this stackblitz url: https://stackblitz.com/edit/angular-rbeehp?file=src%2Fapp%2Fdate-ran ...

angulardatematerial-ui

Error: Chrome is reporting an "Unexpected token :" while Firefox is showing a "SyntaxError: missing ; before statement" issue

Here's the code snippet in question: function getCategoryResponse() { var appid = "1"; $.ajax({ type: 'GET', url: 'http://itunes.apple.com/WebObjects/MZStoreServices.woa/ws/genres?id=36&callback=myCallbackFu ...

javascriptjqueryajax

Experimenting with the speechSynthesis API within an iOS webview application

I'm currently working on developing an app that features TTS capabilities. Within my webview app (utilizing a React frontend compiled with Cordova, but considering transitioning to React Native), I am implementing the speechSynthesis API. It function ...

javascriptiosreactjsspeech-synthesis

The dynamic loading of select tag options in Vue.js is not rendering properly

I'm having trouble displaying a select tag with options loaded from a Vue object. However, when I try to render it, something seems off: Here is the HTML markup for the select tag: <div class="form-group ui-model"> @Html.LabelFor(m => m ...

javascriptjqueryasp.net-mvcmvvmvue.js

Is there a way to easily uncheck all MaterialUI Toggle components with the click of a button or triggering an outside

If you have a set of <Toggle /> components in an app to filter clothes by size, and you want to reset all the filters with a single click on a button rather than unchecking each toggle individually. Is it possible to achieve this using materials-ui ...

javascriptreactjsmaterial-ui

Sending values to URL using the <a> tag in HTML

I currently have the selected language stored in a variable (var lan= urlParam('language')). I am trying to pass this language as a parameter (without PHP) in a URL within an "a" tag, like so: <a href="http://hotelscombined.sitewish.gr/HotelN ...

javascripthtml

Runtime Error: Invalid source property detected - Firebase and Next.js collaboration issue

Currently, I am developing a Next.js application that retrieves data from a Firestore database. The database connection has been successfully established, and the data is populating the app. However, I am facing an issue with displaying the image {marketpl ...

javascriptfirebasegoogle-cloud-firestorenext.js

Display HTML content repeatedly depending on the number selected in a dropdown menu using AngularJS

I need your assistance with a dropdown selection feature on my website. The idea is that based on the number chosen from the dropdown, I want to dynamically repeat sections in HTML. For example, if I select 3 from the dropdown menu, the page should display ...

javascripthtmlangularjs