Commit 5994cd4c authored by Nithya's avatar Nithya

TMSS-299

ViewTable  Component updated by required filter types.
parent 79d65fae
import React, {useRef } from "react";
import React, {useRef, useState } from "react";
import { useSortBy, useTable, useFilters, useGlobalFilter, useAsyncDebounce } from 'react-table'
import matchSorter from 'match-sorter'
import _ from 'lodash';
import moment from 'moment';
import { useHistory } from "react-router-dom";
import {OverlayPanel} from 'primereact/overlaypanel';
import {InputSwitch} from 'primereact/inputswitch';
import { Calendar } from 'primereact/calendar';
let tbldata =[];
......@@ -32,6 +34,67 @@ function GlobalFilter({
)
}
// This is a custom filter UI that uses a
// slider to set the filter value between a column's
// min and max values
function SliderColumnFilter({
column: { filterValue, setFilter, preFilteredRows, id },
}) {
// Calculate the min and max
// using the preFilteredRows
const [min, max] = React.useMemo(() => {
let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
preFilteredRows.forEach(row => {
min = Math.min(row.values[id], min)
max = Math.max(row.values[id], max)
})
return [min, max]
}, [id, preFilteredRows])
return (
<>
<input
type="range"
min={min}
max={max}
value={filterValue || min}
onChange={e => {
setFilter(parseInt(e.target.value, 10))
}}
/>
<button onClick={() => setFilter(undefined)}>Off</button>
</>
)
}
// This is a custom filter UI that uses a
// switch to set the value
function BooleanColumnFilter({
column: { setFilter},
}) {
const [value, setValue] = useState(true);
return (
<>
<InputSwitch checked={value} onChange={() => { setValue(!value); setFilter(!value); }} />
<button onClick={() => setFilter(undefined)}>Off</button>
</>
)
}
function CalendarColumnFilter({
column: { setFilter},
}) {
const [value, setValue] = useState('');
return (
<>
<Calendar value={value} onChange={(e) => { setValue(e.value); setFilter(e.value); }} showIcon></Calendar>
<button onClick={() => setFilter(undefined)}>Off</button>
</>
)
}
// Define a default UI for filtering
function DefaultColumnFilter({
column: { filterValue, preFilteredRows, setFilter },
......@@ -89,7 +152,7 @@ function Table({ columns, data, defaultheader, optionalheader }) {
const defaultColumn = React.useMemo(
() => ({
// Let's set up our default Filter UI
Filter: DefaultColumnFilter,
Filter: CalendarColumnFilter,
}),
[]
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment