Welcome to React-smartgridmaster!

React SmartGridMaster is a feature-rich React package, offering advanced table management functionalities. It enables seamless integration of dynamic filtering, sortable columns, and customizable appearance, empowering developers to create interactive and visually appealing tables. With support for ascending and descending order toggling, it facilitates efficient data exploration and manipulation, making it an essential tool for enhancing user experience in React applications.

Quick Features

• Dynamic Filtering: Effortlessly incorporate advanced filtering options for your data.
• Sortable Columns: Enable sorting functionality on your table columns with ease.
• Customizable Appearance: Tailor the appearance of your table to match your application's design.
• Ascending and Descending Order: Allow users to toggle between ascending and descending orders for better data exploration.
• Dynamic Data Rendering: Render data dynamically to ensure your grid is always up-to-date.
• Customizable Layouts: Tailor your grid's appearance to match your application's design aesthetic.
• Effortless Sorting and Filtering: Enable users to explore their data with ease using built-in sorting and filtering.
• Pagination Support: Handle large datasets seamlessly with pagination support.
• Cross-Browser Compatibility: Ensure your grid looks and performs consistently across all major browsers.
• Accessibility: Make your application more inclusive with built-in accessibility features.
• Extensive Documentation and Support: Access comprehensive documentation and dedicated support to help you succeed.

Getting Started To get started with React-SmartGridMaster

• Follow these simple steps:

1. Install React-SmartGridMaster via npm or yarn:
2. bash npm install react-smartgridmaster
3. or yarn add react-smartgridmaster

Update a publication

At BrainerHub Solutions, we're dedicated to empowering businesses with cutting-edge solutions that drive efficiency and innovation. Our latest breakthrough, in collaboration with leading industry experts, revolutionizes how businesses harness data for actionable insights.

Note: **Stay ahead of the curve with daily/weekly updates managed by BrainerHub Solutions.

Usage

To use React SmartGridMaster in your React application, simply import it and integrate it into your components::

import React from 'react';
import {SmartGridMaster} from 'react-smartgridmaster';

const MyComponent = () => {
  return (
      <p>My Table</p>
      <SmartGridMaster
        data: DataRow[]; (Sample example data)
        sortingEnabled?: boolean; (not required field)
        filteringEnabled?: boolean;(not required field)
        searchingEnabled?: boolean;(not required field)
        itemsPerPage?:number;(not required field)
        tableColor?: string (not required field) e.g "#87CEEB"
      />
  );
};

export default MyComponent;

const data = [
  {
    id: 1,
    profile: { profileIcon: "https://picsum.photos/200", name: "Alice Smith" },
    age: { age: 30, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "1", country: "Canada", countryIcon: "https://via.placeholder.com/50" },
  },
  {
    id: 2,
    profile: { profileIcon: "https://picsum.photos/200", name: "John Doe" },
    age: { age: 35, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "2", country: "USA", countryIcon: "https://via.placeholder.com/50" },
  },
  {
    id: 3,
    profile: { profileIcon: "https://picsum.photos/200", name: "Emily Johnson" },
    age: { age: 28, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "3", country: "UK", countryIcon: "https://via.placeholder.com/50" },
  },
  {
    id: 4,
    profile: { profileIcon: "https://picsum.photos/200", name: "Michael Brown" },
    age: { age: 40, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "4", country: "Australia", countryIcon: "https://via.placeholder.com/50" },
  },
  {
    id: 5,
    profile: { profileIcon: "https://picsum.photos/200", name: "Emma Davis" },
    age: { age: 32, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "5", country: "Germany", countryIcon: "https://via.placeholder.com/50" },
  },
  {
    id: 6,
    profile: { profileIcon: "https://picsum.photos/200", name: "James Wilson" },
    age: { age: 45, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "6", country: "France", countryIcon: "https://via.placeholder.com/50" },
  },
  {
    id: 7,
    profile: { profileIcon: "https://picsum.photos/200", name: "Olivia Martinez" },
    age: { age: 27, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "7", country: "Japan", countryIcon: "https://via.placeholder.com/50" },
  },
  {
    id: 8,
    profile: { profileIcon: "https://picsum.photos/200", name: "William Taylor" },
    age: { age: 38, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "8", country: "Italy", countryIcon: "https://via.placeholder.com/50" },
  },
  {
    id: 9,
    profile: { profileIcon: "https://picsum.photos/200", name: "Sophia Brown" },
    age: { age: 33, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "9", country: "Spain", countryIcon: "https://via.placeholder.com/50" },
  },
  {
    id: 10,
    profile: { profileIcon: "https://picsum.photos/200", name: "Benjamin Garcia" },
    age: { age: 41, profileIcon: "https://picsum.photos/200" },
    email: { email: "[email protected]", platForm: "google" },
    address: { CountryId: "10", country: "China", countryIcon: "https://via.placeholder.com/50" },
  },
];

"To become a sponsor, please visit BrainerHub's Sponsorship Page."

Sample Data

| id | Name | Age | Email | Country | Country Icon | |----|-----------------|-----|---------------------------|----------|---------------------------------------------------| | 1 | Alice Smith | 30 | [email protected] | Canada | | | 2 | John Doe | 35 | [email protected] | USA | | | 3 | Emily Johnson | 28 | [email protected]| UK | | | 4 | Michael Brown | 40 | [email protected]| Australia| | | 5 | Emma Davis | 32 | [email protected] | Germany | | | 6 | James Wilson | 45 | [email protected] | France | | | 7 | Olivia Martinez | 27 | [email protected]| Japan | | | 8 | William Taylor | 38 | [email protected]| Italy | | | 9 | Sophia Brown | 33 | [email protected] | Spain | | | 10 | Benjamin Garcia | 41 | [email protected]| China | |

Latest Update: Now you can add objects to the table dynamically.

Upcoming Features

Stay tuned for the following exciting updates:

1. Table Header Design Fixes

We're constantly refining the user interface to ensure a seamless experience. In the upcoming release, expect improvements to the design and functionality of the table headers for better clarity and usability.

2. Custom Filters

Tailor your data filtering experience to your specific needs with custom filters. This feature will allow you to create and apply personalized filters based on your unique dataset requirements.

3. Grouping

Organize your data more efficiently by grouping related rows together. With grouping functionality, you'll be able to cluster data based on common attributes, providing a clearer overview of your information.

4. Mobile Responsive

Access your data on the go with enhanced mobile responsiveness. Our upcoming release will ensure that the Smart Grid Master component adapts seamlessly to various screen sizes, delivering a consistent and user-friendly experience across devices.

5. Dark and Light Mode Enabled

Tailor the appearance of the Smart Grid Master component to your preference with dark and light mode options. Switch between different color schemes effortlessly to suit your visual preferences and working environment.

Upcoming Releases

Stay updated with upcoming releases to access these exciting features and enhancements. Watch this space for announcements on new versions and their release dates.