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>
    );
}