Data Grid

Data Grid is a powerful tool that allows you to effortlessly present tabular data in a visually appealing format. With built-in features such as client-side filtering, pagination, and export options, it provides a comprehensive solution for displaying and manipulating data.

Key Features

• Tabular Data Display: Easily present data in a grid-like structure for clear and organized visualization.
• Client-Side Filtering: Enable users to quickly search and filter data within the grid, improving data exploration and analysis.
• Pagination: Divide large datasets into manageable chunks, enabling smooth navigation and enhanced performance.
• Export Options: Provide users with the ability to export grid data to various formats such as CSV or Excel, facilitating data sharing and external analysis.
• Data Masking: Ensure data security by incorporating data masking capabilities during export, safeguarding sensitive information from unauthorized access.

Installation

npm i @bluepineapple-nebbia-tech/data-grid

Usage

import DataGrid from "@bluepineapple-nebbia-tech/data-grid";

...
const columns = [
  {
    "field": "id",
    "headerName": "ID",
    "width": 90
  },
  {
    "field": "firstName",
    "headerName": "First Name",
    "width": 150,
    "editable": true
  },
  {
    "field": "lastName",
    "headerName": "Last Name",
    "width": 150,
    "editable": true
  },
  {
    "field": "age",
    "headerName": "Age",
    "type": "number",
    "width": 110,
    "editable": true
  }
]
const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: 90 },
  { id: 6, lastName: 'Melisandre', firstName: 'Tom', age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];


<DataGrid
    columns={columns}
    rows={rows}
    title="Results Grid"
/>

API

Properties

| Property | Description | | -------- | :---------------------------------: | | title | The title of the datagrid. | | rows | Data to show in grid in json format | | columns | Column list with configuration |