mind-react-tables

@mindinventory/mind-react-table

The @mindinventory/mind-react-table package is a versatile and easy-to-use solution for displaying dynamic tables with built-in pagination functionality. It simplifies the process of rendering large data sets in a structured and organized manner, allowing users to navigate through the table's content with ease.

Features

Pagination: The package provides a pagination feature that divides the table's data into multiple pages, improving performance and usability when dealing with large datasets.

Dynamic Rendering: The table dynamically renders its content based on the current page, ensuring a smooth and efficient user experience.

Sorting: Users can easily sort the table's columns in ascending or descending order, enabling them to arrange the data according to their needs.

Customizable Styling: The package offers a range of customization options, allowing users to style the table to match their application's design aesthetic.

Lightweight and Performant: With a focus on performance optimization, the package is designed to efficiently handle large data sets without sacrificing speed or responsiveness.

JSON

• Here we use JSON which shows dynamic data & UI in component.

• We can control some UI section based on set of key value as explain below.

  • Object key columns & data value pass as column and row data as an array.

Installation

Install package.

  npm i mind-react-table

Usage

To use the @mindinventory/mind-react-table component in your project, follow these steps:

1. Import the package into your JavaScript file:

import Table from "mind-react-table";

2. Provide the configuration data as objects. Each object represents Table and it's all module:

const TableConfig = {
  // TABLE STYLE PROPERTY
  styles: {
    headerBgColor: "#D7DAF2",
    headerTextColor: "black",
    bodyBgColor: "white",
    bodyTextColor: "#606060",
  },

  //TABLE DATA PROPERTY
  columns: COLUMN_DATA, // COLUMN DATA
  data: rowData, // TABLE DATA

  //ROWS PER PAGE PROPERTY
  pageSizeOptions: [
    { name: "5", value: 5 },
    { name: "10", value: 10 },
    { name: "15", value: 15 },
    { name: "20", value: 20 },
    { name: "25", value: 25 },
  ],
  showPageSizeOptions: true,
  defaultPageSize: selectedPerPage,
  handleSelectPerPage: handleSelectPerPage,

  // PAGINATION PROPERTY
  showPagination: true,
  currentPage: currentPage,
  handlePagination: handlePagination,

  // FILTER PROPERTY
  filterable: true,
  totalCount: totalCount, // TOTAL PAGE COUNT

  // CHECKBOX PROPERTY
  handleCheckBox: handleCheckBox, // CHECKBOX FOR HANDLE TABLE
  handleBulkOperation: handleBulkOperation,

  // SEARCH PROPERTY
  isSearchable: true,
  searchValue: search,
  searchPlaceHolder: "Search by name, email",
  handleSearch: handleSearch,

  // SORT PROPERTY
  handleSort: handleSort,

  // AT NO DATA ADD BUTTON PROPERTY
  isAddButton: "/",
};

3. Render the Table component and pass the table data as a prop:

return <Table config={TableConfig} />;

4. Node version:

{
  "node": "^14",
  "react": "^18",
}

Configuration options for column

Example:

const COLUMN_DATA = [
  {
    title: "",
    key: "",
    type: "checkBox",
    align: "left",
  },
  {
    title: "Profile",
    key: "email",
    sortable: true,
    transform: "lowercase",
    sortKey: "email",
    align: "left",
  },
  {
    title: "Account Type",
    sortable: true,
    key: "accountType",
    sortKey: "accountType",
    align: "center",
  },
  {
    title: "Email / Mobile Verified",
    key: "isEmailVerified",
    align: "center",
  },
  {
    title: "Signup Platform",
    key: "loginPlatform",
    align: "center",
  },

  {
    title: "Registered On",
    key: "registeredOn",
    align: "left",
    sortable: true,
    render: (column, item) =>
      item ? moment(item[column?.key]).format("lll") : "━━",
  },
  {
    title: "Status",
    key: "accountStatus",
    align: "center",
  },
  {
    title: "",
    key: "email",
    align: "right",
    render: (column, item) => (
      <div className="flex">
        <EyeIcon
          className="w-[20px] ml-2 text-[#eb8b53] cursor-pointer"
          onClick={() => alert(item[column?.key])}
        />
        <PencilSquareIcon
          className="w-[20px] ml-2 text-[#eb8b53] cursor-pointer"
          onClick={() => alert(item[column?.key])}
        />
      </div>
    ),
  },
];

Configuration options for row

Example:

const ROW_DATA = [
  {
    id: "6464d38d77d86ffbc5a3632b", // NOTE: Key name 'id' must required.
    name: "sdfds",
    email: "[e-mail]",
    ...etc,
  },
];

License!

@mindinventory/mind-react-table MIT-licensed.

Let us know!

If you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com

Please feel free to use this component and Let us know if you are interested to building Apps or Designing Products.

Author

Mindinventroy

Manan C Ahir