react-crudx-table

react-crudx-table is a dynamic CRUD table component for React and Next.js that allows you to easily display, update, and delete data in a table format with minimal setup.

Installation

To get started, you need to install the package into your React or Next.js project.

1. Install via npm:

npm install react-crudx-table

2. Or install via yarn:

yarn add react-crudx-table

Usage

Here’s how you can integrate react-crudx-table into your project:

Step 1: Import the Component

In the React or Next.js component where you want to use the table, import CrudxTable:

import CrudxTable from 'react-crudx-table';

Step 2: Set Up Your Data and Columns

Define the data and columns for the table. The data should be an array of objects, and columns should be an array of objects describing each column in the table.

Example:

  const statusData = [
    { label: "Active", value: true },
    { label: "Inactive", value: false },
  ];

  const packageDataTypes = [
    { label: "DATA", value: "DATA" },
    { label: "MINUTE", value: "MINUTE" },
    { label: "COMBO", value: "COMBO" },
    { label: "SMS", value: "SMS" },
  ];


  const formFields = {
    label: "Offer Details",
    fields: [
      { key: "productId", label: "Product ID", type: "text", required: true },
      { key: "packType", label: "Pack Type", type: "select", options: packageDataTypes, required: true },
      { key: "banglaShort", label: "Bangla Short", type: "text", required: true },
      { key: "productImage", label: "Product Image", type:"image", baseUrl: "http://localhost:8000", width:200, height:100,required: true }, // for image add this additional attribute
      { key: "englishShort", label: "English Short", type: "text", required: true },
      { key: "banglaLong", label: "Bangla Long", type: "textarea", rows: 2, required: false },
      { key: "englishLong", label: "English Long", type: "textarea", rows: 2, required: false },
      { key: "status", label: "Status", type: "select", options: statusData, required: true },
    ]
  };

  const filterInputFields = {
    label: "Offer Filters",
    fields: [
      { key: "productId", label: "Filter by Product ID", type: "text", required: false },
      { key: "packType", label: "Select Pack Type", type: "select", options: packageDataTypes, required: false },
      { key: "status", label: "Select Status", type: "select", options: statusData, required: false },
      { key: "startDate", label: "Date Filter", type: "date", required: false },
    ]
  }


  const columns = [
    { key: "productId", label: "Product ID" },
    { key: "packType", label: "Pack Type" },
    { key: "productImage", label: "Product Image", type:"image", width: 200, height: 100, baseUrl: "http://localhost:8000", required: true }, // for image add this additional attribute
    { key: "banglaShort", label: "Bangla Short" },
    { key: "englishShort", label: "English Short" },
    { key: "status", label: "Status" },
    { key: "action", label: "Action" },
  ]

Step 3: Use the CrudxTable Component

Now, use the CrudxTable component, passing the headers and data as props:

Example Usage in a Next.js Project

If you're using Next.js, the steps are almost identical. Here’s an example:

import CrudxTable from 'react-crudx-table';
import 'react-crudx-table/dist/styles.css';

const ExamplePage = () => {

  const [offers, setOffers] = useState([]); 

  const [filters, setFilters] = useState({
    callerId: "",
    phone: "",
    page: 1,
    perPage: 10,
    sortOrder: "desc",
    dateFilter:{
      type: "periodical",
      days: null,
      startDate: null,
      endDate: null
    }
  });

  const [formData, setFormData] = useState({
    id: "",
    productId: "",
    packType: "",
    banglaShort: "",
    englishShort: "",
    banglaLong: "",
    englishLong: "",
    status: "",
  });

  const [pagination, setPagination] = useState(null);
  const [searchTrigger, setSearchTrigger] = useState(false);

  useEffect(() => {
    if (!searchTrigger) return;
    fetchData(1);
  }, [filters]);

  // Fetch data when filters or page changes
  const fetchData = async (page = 1) => {
    const { productId, packType, status, pageSize } = filters;
    const response = await fetch(`${process.env.NEXT_PUBLIC_API}/offers?page=${page}&pageSize=${pageSize}&productId=${productId}&packType=${packType}&status=${status}`);
    const result = await response.json();
    setOffers(result.offers); // Array Object
    setPagination(result?.pagination); // pagination: {currentPage: 1,totalPages: 12,totalRecords: 120,perPage: 10,}
  };

  // Handle filter changes
  const handleFilterChange = (value, key) => {
    setFilters((prev) => ({ ...prev, [key]: value, page: 1 }));
  };


  const statusData = [
    { label: "Active", value: true },
    { label: "Inactive", value: false },
  ];

  const packageDataTypes = [
    { label: "DATA", value: "DATA" },
    { label: "MINUTE", value: "MINUTE" },
    { label: "COMBO", value: "COMBO" },
    { label: "SMS", value: "SMS" },
  ];


  const formFields = {
    label: "Offer Details",
    fields: [
      { key: "productId", label: "Product ID", type: "text", edit: false, required: true },
      { key: "packType", label: "Pack Type", type: "select", options: packageDataTypes, required: true },
      { key: "banglaShort", label: "Bangla Short", type: "text", required: true },
      { key: "productImage", label: "Product Image", type:"image", baseUrl: "http://localhost:8000", width:200, height:100,required: true }, // for image add this additional attribute
      { key: "englishShort", label: "English Short", type: "text", required: true },
      { key: "banglaLong", label: "Bangla Long", type: "textarea", rows: 2, required: false },
      { key: "englishLong", label: "English Long", type: "textarea", rows: 2, required: false },
      { key: "status", label: "Status", type: "select", options: statusData, required: true },
    ]
  };

  // If you want to remove some fields when edit add extra attribute `edit: false`,

  const filterInputFields = {
    label: "Offer Filters",
    fields: [
      { key: "productId", label: "Filter by Product ID", type: "text", required: false },
      { key: "packType", label: "Select Pack Type", type: "select", options: packageDataTypes, required: false },
      { key: "status", label: "Select Status", type: "select", options: statusData, required: false },
  //    { key: "startDate", label: "Date Filter", type: "date", required: false },
      { key: "dateFilter", label: "Date Filter", type: "dateRange", required: false },
    ]
  }

  // You can change key as your own input name


  const columns = [
    { key: "productId", label: "Product ID" },
    { key: "packType", label: "Pack Type" },
    { key: "productImage", label: "Product Image", type:"image", width: 200, height: 100, baseUrl: "http://localhost:8000", required: true }, // for image add this additional attribute
    { key: "banglaShort", label: "Bangla Short" },
    { key: "englishShort", label: "English Short" },
    { key: "status", label: "Status" },
    { key: "action", label: "Action" },
  ]

    const handleSubmit = async (e) => {
    e.preventDefault();
    try {

        // handle your submit logic

        // after get response
        setCloseModal(prev => !prev);
        setFormData({});
        // refresh the list item api

    } catch (error) {
      console.log('my error', error)
    }
  };


  const handleDeleteItem = async(id) => {

    try {
      // handle your crud delete logic

      setCloseModal(prev => !prev);
      // refresh the list item api
    } catch (error) {
      console.error('Error deleting:', error);
    }
  };

  return (
    <div>
      <h1>Table Data</h1>
        <CrudxTable
          columns={columns}
          data={offers}
          addData={{ label: "Add New" }}
          formFields={formFields}
          filters={filters}
          setFilters={setFilters}
          searchTrigger={searchTrigger}
          setSearchTrigger={setSearchTrigger}
          viewBtn
          editBtn
          deleteBtn  // if you want to ser permission for action button `deleteBtn= {user.permissions?.includes('delete-users') ? true : false}`
          closeModal={closeModal}
          exportBtn={{label: "Export"}}
          formData={formData}
          setFormData={setFormData}
          handleSubmit={handleSubmit}
          handleDeleteItem={handleDeleteItem}
          filterInputFields={filterInputFields}
          handleFilterChange={handleFilterChange}
          fetchData={fetchData}
          pagination={pagination}
        />
    </div>
  );
};

export default ExamplePage;

Props

| Prop | Type | Description | |-----------------|---------------------|-----------------------------------------------------------------------------| | header | Array | Array of column definitions, each containing title and field. | | data | Array | Array of data objects to populate the table. | | editBtn | Boolean | If true, allows editing of rows (default: false). | | deleteBtn | Boolean | If true, allows deleting rows (default: false). | | handleSubmit | Function | Callback function triggered when a row is edited. | | handleDeleteItem | Function | Callback function triggered when a row is deleted. |

Customization

You can style the table by using your own CSS or by using the provided classes. The component can be styled using CSS modules or any other CSS-in-JS solution you're using.

Example Styling:

/* Example CSS for table */
.react-crudx-table {
  width: 100%;
  border-collapse: collapse;
}

.react-crudx-table th,
.react-crudx-table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

.react-crudx-table th {
  background-color: #f4f4f4;
}

.react-crudx-table .actions {
  display: flex;
  gap: 10px;
}

.react-crudx-table .action-button {
  background-color: #007bff;
  color: white;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
}

How to Handle Server-Side Data

If you're fetching data from an API (e.g., using fetch or axios), you can update the data prop dynamically.

Example using useEffect:

import { useState, useEffect } from 'react';
import CrudxTable from 'react-crudx-table';

const ExamplePage = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const response = await fetch('/api/data'); // Replace with your API endpoint
      const result = await response.json();
      setData(result);
      setLoading(false);
    };

    const fetchData = async (page = 1) => {
      const { name, status, perPage, sortOrder } = filters;
      const params = {
        name,
        status,
        page,
        perPage,
        sortOrder
      };
      
      // send data to your backend api - you can use fetch or axios (get or post method)

      setData(response.data);
      setPagination(response?.pagination);
      setLoading(false);

    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Server Data List</h1>
      {loading ? <p>Loading...</p> : <CrudxTable data={data} />}  
    </div>
  );
};

export default ExamplePage;

Contribution

If you'd like to contribute to this project, feel free to fork the repository and create a pull request. Please ensure that your changes are well-documented and covered by tests.

License

This project is licensed under the MIT License - see the LICENSE file for details.