CNC Grid

> 🚧 This package is under active development. Rapid updates are being added daily, and contributions from developers are highly encouraged! 🚧

CNC Grid is a customizable and easy-to-use data grid component for React and Next.js applications. It provides flexible filtering, sorting, and pagination features, along with the ability to export data to various formats (CSV, Excel, and PDF). Built to be lightweight and highly customizable, CNC Grid fits seamlessly into your projects.

!npm
!license
!downloads

Features

- Column Visibility Management: Show or hide columns based on user preferences.
- Filtering and Sorting: Easily filter and sort data on multiple columns.
- Pagination: Built-in pagination with configurable page sizes.
- Data Export: Export data to CSV, Excel, and PDF formats.
- Customizable: Customize styles, column headers, and more.
- Responsive: Adjusts to screen sizes and supports fixed headers.

Demo and Documentation

Visit the homepage for a live demo and complete documentation.

Installation

To install CNC Grid in your project, use npm:

``bash
npm install cnc-grid
`

Usage

Here is a quick example of how to use CNC Grid in your project:

`jsx
import React from 'react';
import CNCGrid from 'cnc-grid';

const columns = [
{ headerName: 'Brand', field: 'brand', sortable: true, filterable: true },
{ headerName: 'Product', field: 'product', sortable: true, filterable: true },
{ headerName: 'Price', field: 'price', sortable: true, filterable: false },
];

const data = [
{ brand: 'Apple', product: 'iPhone 12', price: 799 },
{ brand: 'Samsung', product: 'Galaxy S21', price: 699 },
{ brand: 'Google', product: 'Pixel 5', price: 699 },
];

const App = () => (
colDef={columns}
rowData={data}
gridHeight="500px"
gridWidth="100%"
export={{ csv: true, excel: true, pdf: true }}
pagination
/>
);

export default App;
`

Props

$3

| Prop | Type | Description | Default |
|-----------------------------|-----------------------------------|---------------------------------------------------------------------------------------------------------|-----------------------|
| colDef | Array | Defines columns of the grid. Each object in the array represents a column with its settings. | Required |
| rowData | Array