score:3
so i was having the same trouble here is my solution
i have used flatpickr , moment
datefilter.tsx
export const datefilter = ({
column: {
filtervalue,
setfilter,
prefilteredrows,
id,
},
rows
}: any) => {
const dates = prefilteredrows.map((val: any) => moment(val.original[id],dateformat))
const mindate = moment.min(dates).subtract(1,'day') // to include the date
const maxdate = moment.max(dates).add(1, 'day')
return (
<react.fragment>
<flatpickr
classname='form-control'
onchange={(date) => {
if (date.length === 2) {
setfilter([date[0],date[1]])
}
}}
options={{
enable: [
{
from: mindate.todate(),
to : maxdate.todate()
}
],
mode : 'range'
}}
/>
</react.fragment>
); };
now un your maintable component file . add a constant called filtertypes . and here is the object
const filtertypes : any = {
date: (rows: any[], id: any, filtervalue: any) => {
let start = moment(filtervalue[0]).subtract(1, 'day')
let end = moment(filtervalue[1]).add(1, 'day')
return rows.filter(val =>
moment(val.original[id],dateformat).isbetween(start, end);
)
}
}
don't forget to add filter and filter properties in your column definition
Source: stackoverflow.com
Related Query
- Using React Date Range picker to filter a React table
- React MUI datatable date range filter
- Best way to filter table in React
- How can I filter out a date between a range of date in a react-table
- AngularJS date filter in React
- Airbnb react date range picker only showing current month calendar not selected dates month calender
- React-table date range filter
- React Typescript: Antd Table filter
- React table is getting sorted on filter
- how to filter all columns of html table using react js?
- Filter antd Table With datePicker in react
- Search bar to filter table results in React with timeout
- Filter table with checkboxes with React & Material UI
- Date formatting within react bootstrap table
- React JS Filter Methods: Hiding table columns using array filters and state
- Reactjs - antd table filter as a react class
- Separate filter and sorting button for react table
- How to get start and end date value in React date range picker?
- Date time sorting in react table on particular column (column name transaction date)
- React Hook Form with datepicker Range doesn't pick date
- React bootstrap table 2 programmatically select filter
- How to refresh the table data when one of the item has its valid till date and time has expired in React Js
- Sortable react material UI table with specific to date column
- How to filter react table based on drop down data selected?
- How to show the specified table row data based on the filter option in react js
- how to use Date range filter in reactjs
- How do I filter a Bootstrap table based on a dropdown value in react
- React - Ant Design change default filter icon in table to material icon
- How to do OR filter using DevExtreme React Grid Table with either FilteringState and/or LocalFiltering?
- How to filter a React table using custom filter component?
More Query from same tag
- How to set the state of the child component and the parent component correctly?
- Froala React component throwing "cannot set property 'more_btn' of undefined"
- how to avoid overwriting when inserting todolist task list
- Unwrap a component in React
- Shuffling React state array containing React components
- Send authorization request from React to Spring REST
- call a function from within eventListener
- Add Icon To Title Property of Material Table
- Remove specific product based on multiple factors
- Get the timing when data renderd in a react component in reactjs hook
- ReactJS: The last radio button value cannot be sent
- cannot get XSRF-TOKEN from cookie in nextjs (Reactjs)
- React iframe sandbox don't allow anything
- Combine regex for mobile number validation
- how to create deep paths in a tree structure in react-router v6
- How can I reference photos in a folder locally in react?
- How can I mock FileReader with jest?
- react javascript arrow function without arrows?
- how to dispatch a action in redux middleware?
- How to show couple images in preview of ANTD carousel
- React-Select isMulti retrieve selected options
- Resetting view to default tab with react-web-tabs
- how can i put the username in the navbar after logging in?
- Adding the function to remove products from the cart won't allow me to add more products
- Stripe /v1/payment_intents/:id/confirm returns HTTP 400 “Received unknown parameters” (Stripe Elements and React)
- Double spread problem - getting rid of Object.assign()
- Add notification to Windows notification center without displaying it on screen
- react-bootstrap and Panel.Body
- How to have React evaluate a dynamic variable?
- My Request by token query is returning null