Opt-table NPM | npm.io

opt-table

opt-table is a versatile and customizable React table package built with Material-UI and Framer Motion. It provides a feature-rich table component for your React applications, including support for pagination, collapsible rows, sorting, and a responsive design.

Features

َAdd Rows: Add new Row will be implemented by providing a Promise to options for newDataHandler method an accessing the refs of table .
َUpdate Rows: Edit Row will be implemented by providing a Promise to options for editDataHandler and add the edit_row flag to options property of table .
َDelete Rows: Delete Row will be implemented by providing a Promise to options for deleteDataHandler and add the edit_row flag to options property of table .
Pagination: Easily implement pagination with options for the number of rows per page and navigation controls.
Collapsible Rows: Make your table more interactive by allowing users to expand and collapse rows for additional details.
Sorting: Enable sorting on one or multiple columns for a better user experience.
Responsive Design: "opt-table" is designed to adapt to different screen sizes, making it suitable for both desktop and mobile applications.
Customization: You have full control over the appearance and behavior of the table through custom styling and callbacks.

Props

table_header_list: An array of objects with the following properties.

type tableHeaderProps = {
  width?: string | number,
  is_server_side?: boolean,
  has_details_penel?: boolean,
  header_style?: React.CSSProperties,
  row_style?: React.CSSProperties,
  Render?: React.FunctionComponent<{ renderData: T }>,
  title: string | undefined,
  table_key: string,
  align: "center" | "left" | "right" | "inherit" | "justify" | undefined,
  sortable?: boolean,
};

data: An array of objects with the actual data - every header uses table_key to access it's coresponding data.

DetailsPanel: An array of objects - with the following data.

type detailPanelProps = {
  // you should specify a table key from your data object ,so when that cell is clicked collapse table will opens
  table_key: string,
  // a component to be render as a detail panel ,this component will recive an ebject with the row data
  Component: React.FunctionComponent,
};

container_style: css properties for table container
default_sort: default sort for table.
has_pagination: a boolean to specify has pagination or not .
options: awailable options for table so far :

type optionType<T> = {
  //
  // Set The direction of the table
  direction: "rtl" | "ltr",
  //
  // PROVIDE THIS METHOD FOR ACCESSING NEW DATA
  newDataHandler: (result: T) => Promise<boolean>,
  //
  //  PROVIDE THIS METHOD FOR ACCESSING EDITED DATA
  editDataHandler: (result: T) => Promise<boolean>,
  //  PROVIDE THIS METHOD FOR ACCESSING DELETED DATA
  deleteDataHandler: (result: T) => Promise<boolean>,
  //
  // FOR ROWS TO HAVE EDIT AND DELETE iCONS NEED TO ADD THIS PROPPS
  edit_row?: boolean,
  delete_modal_title?: React.ReactNode,
  //
  // THE ACEEPT TITLE FOR DELETEING THE ROW MODAL
  modal_yes_title?: string,
  //
  // THE CANCEL TITLE FOR DELETEING THE ROW MODAL
  modal_no_title?: string,
};

ref: to access table methods :

type OptTableRefProps<T> = {
  //
  // By accesing this method from ref an calling it , table will toggles between add new rows mode
  addNewRow: () => Void,
};

Installation

Install opt-table and its dependencies using npm :

npm install opt-table --legacy-peer-deps

Usage

import React from "react";
import { OptTable } from "opt-table";

function MyTable() {
  // Your data source
  const data = [
    // Your data objects here
  ];

  // Define columns

  const table_head_list = [
    /*
      an array of object with tableHeaderProps types

    */
  ];

  return (
    <OptTable
      data={data}
      table_head_list={columns}
      default_sort="name"
      has_pagination={true}
      DetailsPanel={[
        { table_key: "name", Component: ProfileDetailPanel },
        { table_key: "resume", Component: ResumeDetailPanel },
      ]}
      container_style={{ border: "1px solid #999" }}
    />
  );
}

Please refer to the official documentation for more details and customization options.