Rtabulize Component

Rtabulize is a customizable React table component designed to handle dynamic data with features such as sorting, pagination, and filtering. It provides a flexible way to display tabular data with additional functionalities like search and custom column rendering.

Features

• Search: Filter table data based on a search term.
• Sorting: Clickable column headers for ascending/descending sorting.
• Pagination: Navigate through data with next and previous controls.
• Custom Column Rendering: Apply custom styles or components to specific columns.

Installation

To use the Rtabulize component, you need to have a React environment set up. You can include this component in your project by copying the Rtabulize component code into your project directory.

Usage

Here is a basic example of how to use the Rtabulize component:

import React from 'react';
import Rtabulize from 'react-tabulize'; 

const MyComponent = () => {
  const data = [
    { _id: 1, name: 'John Doe', phone: '123456789', msg: 'Hello', url: 'https://example.com', status: 1, screenshot: '/images/screenshot1.png' },
    // More data objects...
  ];

  const header = [
    { key: '_id', label: 'Id' },
    { key: 'name', label: 'Customer Name' },
    { key: 'phone', label: 'Phone No' },
    { key: 'msg', label: 'Msg' },
    { key: 'url', label: 'URL' },
    { key: 'status', label: 'Status' },
    { key: 'screenshot', label: 'Screen-Shot' },
  ];

  const columnStyle = [
    {
      targets: [6],
      tag: function (data) {
        return (
          <img style={{ width: "50px" }} src={`${process.env.REACT_APP_API_URL + data.screenshot}`} alt="screenshot" />
        );
      },
    },
    {
      targets: [5],
      tag: function (data) {
        return data.status === 1 || data.status === 0 ? (
          <>
            <span className="badge bg-danger">Msg not send</span><br />
            <span style={{ cursor: 'pointer' }} onClick={() => console.log(`Resend message for ID: ${data._id}`)}>
              <u>Resend Msg</u>
            </span>
          </>
        ) : (
          <span className="badge bg-success">Msg send</span>
        );
      },
    },
  ];

  return (
    <Rtabulize
      tableClass="table"
      header={header}
      data={data}
      columnStyle={columnStyle}
      pageLength={10}
    />
  );
};

export default MyComponent;

Props

• tableClass (string, optional)
  Description: CSS class name(s) to style the table.
  Default: ""

• header (array of objects, required)
  Description: Defines the structure of the table header. Each object in the array should have a key corresponding to the data field and a label for the column header.
  Example: [ { key: 'name', label: 'Customer Name' }, { key: 'status', label: 'Status' } ]

• data (array of objects, required)
  Description: The dataset to be displayed in the table. Each object should have keys corresponding to the header keys.
  Example: [ { name: 'John Doe', status: 1 } ]

• columnStyle (array of objects, optional)
  Description: Allows custom rendering of specific columns. Each object in the array should specify targets (array of column indexes) and a tag function that returns JSX for rendering.
  Example: [ { targets: [0], tag: (data) => <img src={data.url} alt="image" /> } ]

• pageLength (number, optional)
  Description: Number of rows to display per page.
  Default: 10

• search (boolean, optional)
  Description: Enables or disables the search functionality.
  Default: true

• sort (boolean, optional)
  Description: Enables or disables sorting on all columns.
  Default: true

• pagination (boolean, optional)
  Description: Enables or disables pagination controls.
  Default: true