Fast & Feature-Rich React Data Grid Component by SVAR

Description:

SVAR React DataGrid is a React component library for displaying and managing tabular data. This library provides a structured component for rendering large datasets with high performance. It handles complex data presentation requirements within modern web applications.

The grid supports core data operations including sorting, filtering, and pagination. It also includes advanced features like in-cell editing, row reordering, and tree data structures. You can use this component to build administrative interfaces, data dashboards, and complex business applications.

Features

• ⚡ High Performance: Optimized for large datasets with virtual scrolling and dynamic loading.
• ✏️ In-Cell Editing: Provides various cell editors like datepicker, combo, and select.
• 🎨 Customization: Allows custom HTML for cells and easy styling with CSS.
• 🔢 Sorting and Filtering: Supports sorting by multiple columns and advanced filtering capabilities.
• 📄 Paging: Includes paging support for better data navigation.
• ♿ Accessibility: Compatible with the WAI-ARIA standard for accessibility.
• 🧊 Frozen Columns: Allows freezing of columns for better visibility of key information.
• ↔️ Row Reordering: Features drag-and-drop functionality for reordering rows.
• 🌳 Tree-like Structure: Can display hierarchical data in a tree-like format.
• 🔄 Undo/Redo: Includes built-in support for undoing and redoing actions.
• ⌨️ Keyboard Navigation: Supports keyboard navigation for improved accessibility and productivity.
• 🔗 Backend Data Binding: RestDataProvider simplifies connecting to backend data sources.
• 🌓 Themes: Comes with both dark and light skins for different visual preferences.

Use Cases

• Financial Dashboards: Display and manipulate large volumes of financial data in real-time with features like sorting, filtering, and in-cell editing.
• Inventory Management Systems: Manage product inventories with a clear and interactive data table that supports features like expandable rows for detailed information and custom cell rendering for product images.
• Customer Relationship Management (CRM): Organize and view customer data with a customizable grid that allows for easy sorting and filtering of customer information.
• Project Management Tools: Track project tasks and progress with a tree-like structure to represent hierarchical data and drag-and-drop row reordering to adjust task priority.
• E-commerce Platforms: Display product listings with advanced filtering and sorting options to help users find what they are looking for quickly.

How to Use It

1. Install the package from NPM.

npm install @svar-ui/react-grid

2. Import the Grid component and the necessary CSS into your project.

import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";

3. You can then initialize the grid with your data and column definitions. The data array contains the data to be displayed, while the columns array defines the table’s columns.

const data = [
  {
    id: 1,
    product: "Laptop",
    quantity: 10,
    price: 1200,
    inStock: true,
  },
  {
    id: 2,
    product: "Mouse",
    quantity: 50,
    price: 25,
    inStock: true,
  },
];
const columns = [
  { id: "id", width: 50 },
  { id: "product", header: "Product", width: 150 },
  { id: "quantity", header: "Quantity", width: 100 },
  { id: "price", header: "Price", width: 100 },
  { id: "inStock", header: "In Stock" },
];
export default function App() {
  return <Grid data={data} columns={columns} />;
}

4. To apply a theme, you can import one of the predefined themes, such as Willow or WillowDark, and wrap your Grid component with it.

import { Grid, Willow } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
// ... data and columns definitions
export default function App() {
  return (
    <Willow>
      <Grid data={data} columns={columns} />
    </Willow>
  );
}

5. To run your application locally, navigate to your project’s root folder, install the dependencies, and start the development server.

cd your-project-folder
npm install
npm run dev

6. Available component props.

• autoConfig: (Optional) Creates a table structure automatically with default or basic column settings.
• autoRowHeight: (Optional) Enables the automatic height adjustment of rows in the table.
• cellStyle: (Optional) Defines the style of a cell in the table.
• columns: (Optional) An array of objects with column settings.
• columnStyle: (Optional) Defines the style of a column in the table.
• data: (Optional) An array of objects containing the data for the Grid.
• dynamic: (Optional) Enables dynamic data loading.
• footer: (Optional) Enables a footer in the table.
• header: (Optional) Enables a header in the table.
• multiselect: (Optional) Allows the selection of multiple rows using SHIFT or CTRL with a mouse click.
• overlay: (Optional) Shows an overlay when the table is empty or in a loading state.
• reorder: (Optional) Enables row reordering via drag-and-drop.
• responsive: (Optional) Allows the Grid to adjust to different page sizes.
• rowStyle: (Optional) Defines the style of a row in the table.
• select: (Optional) Enables or disables the ability to select rows on click.
• selectedRows: (Optional) Marks rows as selected.
• sizes: (Optional) An object with the table size settings (width and height).
• sortMarks: Adds sort indicators to column headers.
• split: (Optional) Allows freezing of the leftmost columns while scrolling.
• tree: (Optional) Enables the tree structure in the table.
• undo: (Optional) Enables the execution of undo and redo actions.

7. API Methods.

• api.exec(): Allows the triggering of Grid actions.
• api.getColumn(id): Gets an object with the column configuration.
• api.getReactiveState(): Gets the state object with the reactive properties of the Grid.
• api.getRow(id): Gets an object with the row configuration.
• api.getState(): Gets the state object that stores the current state of most DataGrid properties.
• api.getStores(): Gets an object with the DataStore properties of the Grid.
• api.intercept(): Allows the interception and blocking or modification of actions.
• api.on(): Allows the attachment of a handler to inner events.
• api.setNext(): Allows the addition of an action into the Event Bus order.

FAQs

Q: Can SVAR React DataGrid handle large datasets?
A: Yes, it is optimized for performance and can handle large amounts of data through virtual scrolling and dynamic loading.

Q: Does it support in-cell editing?
A: Yes, it supports in-cell editing with various editors like text fields, dropdowns, and date pickers.

Q: Can I customize the appearance of the grid?
A: Yes, the grid is easily customizable with CSS and comes with predefined light and dark themes.

Q: Does it support backend integration?
A: Yes, it includes a RestDataProvider to simplify binding the grid to a backend.