mind-react-tables
v1.0.0
Published
The react table chart is dynamic table component. Here we show a dynamic table with filter. User can show table data with pagination dynamically. Table is fully responsive with all screens.
Downloads
6
Maintainers
Readme
@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:
- Import the package into your JavaScript file:
import Table from "mind-react-table";
- 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: "/",
};
- Render the Table component and pass the table data as a prop:
return <Table config={TableConfig} />;
- 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: "[email protected]",
...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