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.

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:

npm install cnc-grid

Usage

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

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 = () => (
  <CNCGrid
    colDef={columns}
    rowData={data}
    gridHeight="500px"
    gridWidth="100%"
    export={{ csv: true, excel: true, pdf: true }}
    pagination
  />
);

export default App;

Props

CNCGrid Props

Prop	Type	Description	Default
colDef	Array<ColumnDef>	Defines columns of the grid. Each object in the array represents a column with its settings.	Required
rowData	Array<Object>	Array of data objects representing rows in the grid.	Required
gridHeight	string	Sets the height of the grid.	"500px"
gridWidth	string	Sets the width of the grid.	"100%"
rowHeight	number	Height of each row in the grid.	40
headerHeight	number	Height of the header row.	50
export	{ csv?: boolean, excel?: boolean, pdf?: boolean }	Enables export options for CSV, Excel, and PDF.	{ csv: false, excel: false, pdf: false }
pagination	boolean	Enables or disables pagination for the grid.	false
pageSize	number	Number of rows per page if pagination is enabled.	10
pageSizes	Array<number>	Array of page size options for pagination.	[10, 20, 50]
currentPage	number	The current active page if pagination is enabled.	1
onSelectionChange	(selectedRows: any) => void	Callback function called when row selection changes.	undefined
onRowClick	(row: any) => void	Callback function called when a row is clicked.	undefined
onRowDoubleClick	(row: any) => void	Callback function called when a row is double-clicked.	undefined
onRowRightClick	(row: any) => void	Callback function called when a row is right-clicked.	undefined
onCellClick	(cell: any) => void	Callback function called when a cell is clicked.	undefined
onCellDoubleClick	(cell: any) => void	Callback function called when a cell is double-clicked.	undefined
onCellRightClick	(cell: any) => void	Callback function called when a cell is right-clicked.	undefined
onSortChange	`(sortField: string, sortDirection: 'asc'	'desc') => void`	Callback function called when sorting changes.
onFilterChange	(filterText: string) => void	Callback function called when a filter is applied.	undefined
onColumnResize	(field: string, width: number) => void	Callback function called when a column is resized.	undefined
onColumnVisibilityChange	(field: string, visible: boolean) => void	Callback for column visibility toggle.	undefined
onColumnOrderChange	(field: string, order: number) => void	Callback for changing column order.	undefined
onGridReady	(api: any) => void	Callback function called when the grid is initialized.	undefined
loading	boolean	Shows a loading indicator overlay on the grid if set to true.	false
noDataMessage	string	Message to display when there is no data in the grid.	"No data available"

ColumnDef Props

Prop	Type	Description	Default
headerName	string	The name of the column displayed in the header.	Required
field	string	The field name in rowData for this column.	Required
sortable	boolean	Enables sorting for the column.	false
filterable	boolean	Enables filtering for the column.	false
width	number	Sets the width of the column.	undefined
visible	boolean	Controls column visibility.	true

Exports

Export Options

You can export data from the grid in various formats. By setting the export prop, you can enable or disable export buttons for CSV, Excel, and PDF formats.

export: {
  csv: true,
  excel: true,
  pdf: true
}

Contributing

Contributions are welcome! Please follow the contribution guidelines.

License

This project is licensed under the ISC License. See the LICENSE file for more information.

Author

Developed by Syed Suhaib Zia from Code N Code IT Solutions.

• Email: [email protected]
• Organization: Code N Code IT Solutions

Links

• Homepage: https://cnc-ui.com/cnc-grid
• Repository: GitHub