Scribd
Upload
45 views2 pages

Customefilter

This document defines custom formatters and filters for columns in an AgGridReact table. It defines a numberValueFormatter to format numbers to two decimal places, and a saleValueFormatter to return 'N/A' for the value 1. It also defines custom filter parameters for number and sale columns to allow filtering of formatted numeric values. The GridExample component renders an AgGridReact table with this custom formatting and filtering applied.

Uploaded by

rohit kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
45 views2 pages

Customefilter

This document defines custom formatters and filters for columns in an AgGridReact table. It defines a numberValueFormatter to format numbers to two decimal places, and a saleValueFormatter to return 'N/A' for the value 1. It also defines custom filter parameters for number and sale columns to allow filtering of formatted numeric values. The GridExample component renders an AgGridReact table with this custom formatting and filtering applied.

Uploaded by

rohit kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

'use strict';

import React, { useCallback, useMemo, useRef, useState } from 'react';


import { createRoot } from 'react-dom/client';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

var numberValueFormatter = function (params) {


return params.value.toFixed(2);
console.log(params)
};

var saleFilterParams = {
allowedCharPattern: '\\d\\-\\,\\$',
numberParser: (text) => {
return text == null
? null
: parseFloat(text.replace(',', '.').replace('$', ''));
},
};
var customNumberFilterParams = {
applyCustomNumberFilter: (filterValue, cellValue) => {
// Parse the filter value and cell value as numbers
if(parseFloat(filterValue)===1){
return cellNumber === 'N/A'
}
const filterNumber = parseFloat(filterValue);
const cellNumber = parseFloat(cellValue);

// Check if the cell value passes the filter condition


// For example, filter out values greater than the filter number

return cellNumber === filterNumber;


}
};

var saleValueFormatter = function (params) {


if(params.value===1){
return 'N/A'
}
var formatted = params.value
return formatted
};

const GridExample = () => {


const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
const [rowData, setRowData] = useState(getData());
const [columnDefs, setColumnDefs] = useState([
{
field: 'sale',
headerName: 'Sale ($)',
filter: 'agNumberColumnFilter',
floatingFilter: true,

valueFormatter: saleValueFormatter,
filterParams: customNumberFilterParams
},
{
field: 'sale',
headerName: 'Sale',
filter: 'agNumberColumnFilter',
floatingFilter: true,
filterParams: saleFilterParams,

},
]);
const defaultColDef = useMemo(() => {
return {
flex: 1,
minWidth: 150,
};
}, []);

return (
<div style={containerStyle}>
<div style={gridStyle} className="ag-theme-alpine">
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
></AgGridReact>
</div>
</div>
);
};

const root = createRoot(document.getElementById('root'));


root.render(<GridExample />);

You might also like