Welcome to react-deep-table 👋

Introduction

react-deep-table is a powerful and customizable React library for creating feature-rich, dynamic tables with unlimited nested rows. Simplify complex data representation with intuitive expand/collapse functionality and seamless performance. Perfect for building scalable and interactive data grids in modern React applications .

Table of Contents

• Features
• Installation
• Version
• Usage
• Customization
• License
• Contributing
• Issues
• New_Feature
• Contact

Features

• no external script loading, i.e. no dependencies on SDKs
• supports tree shaking with ES modules
• use own style pop-up window
• share buttons for:
  • Facebook
  • Twitter
  • Email
  • Instagram

Installation

You can install react-deep-table via npm or yarn:

npm install react-deep-table

or

yarn add react-deep-table

Version Information

Current Version: 2.1.8

This is an alpha version of react-deep-table. It includes the latest features and improvements but may also contain bugs or unfinished functionality. We encourage developers to test this version but recommend using it in non-production environments.

Previous Stable Version: 2.1.5

If you prefer stability over new features, you may choose to use the latest stable version. It is well-tested and suitable for production environments. You can install it by running:

Usage

To use react-deep-table, import the desired components and render them in your React application. Below is a basic example:

Basic Example

import React from "react";
import {
Table
} from "react-deep-table";

const TableComponent = () => {
	const demoData = [
    {
      id: 1,
      name: "Category 1",
      value: "Value 1",
      status: "Active",
      date: "2024-12-03",
      children: [
        {
          id: 2,
          name: "Subcategory 1.1",
          value: "Value 1.1",
          status: "Inactive",
          date: "2024-11-20",
          children: [
            { id: 3, name: "Item 1.1.1", value: "Value 1.1.1", status: "Active", date: "2024-11-10" },
          ],
        },
        {
          id: 4,
          name: "Subcategory 1.2",
          value: "Value 1.2",
          status: "Active",
          date: "2024-10-30",
        },
      ],
    },
  ];

	const headerData = ['ID', 'Name', 'Value', 'Status', 'Date']
  

	return (
		<div>
			 <Table body={demoData} header={headerData} />
		</div>
	);
};

export default TableComponent;

Customization

react-deep-table customize the buttons by applying your own styles and configurations. Here’s how you can enhance the appearance and behavior of your buttons:

Custom Children

You can pass any React node as children to the share buttons, allowing you to use custom images, SVGs, or text. This gives you the flexibility to design buttons that fit your application's branding.

Example

let COSTUM_STYLE_OBJECT = {
  border: '1px solid #ddd',
  headerColor: "#007BFF",
  footerColor: "#28A745",
  bodyColor: "#F8F9FA",
  tableColor : "#FFFFFF",
}


<Table costumStyle={COSTUM_STYLE_OBJECT}  costumClass = 'react-deep-table'>

License

This project is licensed under the MIT License. See the LICENSE file for more information.

Contributing

We welcome contributions! Please read our CONTRIBUTING.md for guidelines on how to get started.

Issues

If you encounter any issues, please read our ISSUES.md for guidlines how to submit a issue .

New_Feature

We welcome contributing a new feature to react-deep-table Please read our NEW_FEATURE.md for guidelines for how to propose a new feature.

Contact

For any questions or feedback, please reach out to [[email protected]].