0.2.8 • Published 2 years ago
df-react-grid v0.2.8
DFGrid React
DFGrid is an extended version of React Ag-grid with additional features. This package contains all the functions used in the native Ag-grid. All information can be found in the official Documentation The package uses just MIT licence features.
The package allows to add a panel to the installed: search field custom HTML block import button export button Add row button show / hide burger menu columns
addRowButton - //Allows to add new record, optional, default = false
widthGrid - //Sets the width of the grid, optional, default = undefined. See more info in official documentation
heightGrid - //Sets the height of the grid, optional, default = undefined. See more info in official documentation,
allowExport - //Allows to export data from a table, optional, default = false
allowImport - //Allows to import data from a table, optional, default = false
actionsComponent - //Allows to add a custom component to the panel, optional, default = undefined
In addition to the standard columnDef parameters, you can use several additional parameters. tempData - used to get data in case the user wants to download an example file. format is used in conjunction with type = 'date' when you are using the column type as date.
Example
Then run the example inside another:
import React, { useState } from "react";
import { DFGrid, DFColumn } from "df-react-grid";
import dayjs from 'dayjs';
const DEFAULT_FORMAT = 'DD MMM, YYYY';
const cellRendererSelector = (params) => {
const type = params.colDef.type;
if (type === 'date') {
return {
component: 'agRendererDate'
};
}
return undefined;
};
export default function App() {
const [gridApi, setGridApi] = useState(null);
const [gridColumnApi, setGridColumnApi] = useState(null);
const [rowData, setRowData] = useState(null);
const onGridReady = (params) => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
const updateData = (data) => {
setRowData(data.slice(0, 50));
};
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(
[
{ country: 'United States', athlete: 'Alex', age: '15', date: 'Nov 29 2021' },
{ country: 'United States 1', athlete: 'Alex 1', age: '15', date: 'Dec 12 2020 10:00:00 AM' },
{ country: 'United States 2', athlete: 'Alex 2', age: '15', date: new Date('Nov 11 2007 10:00:00 AM') },
{ country: 'United States 2', athlete: 'Alex 2', age: '15', date: new Date('Nov 08 2007 10:00:00 AM') },
{ country: 'United States 2', athlete: 'Alex 2', age: '15', date: new Date('Oct 10 2007 10:00:00 AM') },
{ country: 'United States 2', athlete: 'Alex 2', age: '15', date: new Date('12-06-2014') },
{ country: 'United States 3', athlete: 'Alex 3', age: '15', date: new Date('04-03-2006') },
]
));
};
const dateComparator = (a, b) => new Date(b) - new Date(a);
const dateFilterParams = {
comparator: function (filterLocalDateAtMidnight, cellValue) {
if (new Date(filterLocalDateAtMidnight) === new Date (cellValue)) {
return 0;
}
if (new Date (cellValue) < new Date(filterLocalDateAtMidnight)) {
return -1;
}
if (new Date (cellValue) > new Date(filterLocalDateAtMidnight)) {
return 1;
}
},
browserDatePicker: true,
};
return (
<div className="App">
<DFGrid
rowData={rowData}
widthGrid="100%"
defaultColDef={{
flex: 1,
minWidth: 150,
filter: true,
filterParams: {
buttons: ['reset', 'apply']
}
}}
heightGrid="400px"
addRowButton
allowExport
allowImport
actionsComponent={<SomeComponent />}
frameworkComponents={{
agRendererDate: getRendererDate
}}
onGridReady={onGridReady}
>
<DFColumn field="country" sortable editable tempData={['United States', 'Australia', 'Canada']} />
<DFColumn field="athlete" minWidth={180} tempData={['Alex']} />
<DFColumn field="age" filter="agNumberColumnFilter" />
<DFColumn field="date"
headerName='Date'
type="date"
// format={'DD MM,---- YY'}
editable={false}
minWidth={150}
valueGetter={params => {
const format = params.colDef.format || DEFAULT_FORMAT;
const cellValue = params.data[params.colDef.field];
const isValid = dayjs(cellValue).isValid();
return isValid ? dayjs(cellValue).format(format) : ''
}}
filter="agDateColumnFilter"
comparator={dateComparator}
filterParams={dateFilterParams}
cellRendererSelector={cellRendererSelector}
tempData={[ '12.12.2020', new Date('Dec 11 2020 10:00:00 AM'), new Date('Dec 12 2020 10:00:00 AM'), new Date('Dec 13 2020 10:00:00 AM')]}
/>
</DFGrid>
</div>
);
}