Table Component

A customizable, reusable table component for React that allows dynamic row rendering, customizable headers, optional buttons in each row, and click event handling.

Features

• Display tabular data in a structured format.
• Customize the appearance of headers and rows via props.
• Optionally display buttons in each row, with a custom action when clicked.
• Easily integrated into any React project.

1.3.7

• Added props to color each cell manually

Installation

You can install the Table component via npm:

npm install table-view-react

Usage

• To use the Table component, import it into your React component and pass the required props.

Example

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

const data = [
  {
      "Antibody": "Agan1_HL",
      "Isoelectric point": 8.66,
      "Fv net charge": 6.2,
      "Hydrophobicity": -0.3252212389,
      "Extinction coeff": 48610,
      "BSA": 769.001,
      "Hydrodynamic radius": 23.8205643,
      "Helix ratio": 0.01327433628,
      "Sheet ratio": 0.5088495575,
      "PSH": 86.29281622,
      "PPC": 0.6291962302,
      "PNC": 0.08993442037,
      "PPA": 2348.12,
      "Solvation energy": -9233.929847,
      "Binding energy": 61.387924,
      "Dipole moment": 104.2520671,
      "Hydrophobic moment": 74763.15289,
      "Amphipathicity": 1.789992971,
      "SAP score": 107.213,
    },
    {
      "Antibody": "Agan2_HL",
      "Isoelectric point": 7.31,
      "Fv net charge": 2.1,
      "Hydrophobicity": -0.311790393,
      "Extinction coeff": 54110,
      "BSA": 876.184,
      "Hydrodynamic radius": 23.74849427,
      "Helix ratio": 0.03930131004,
      "Sheet ratio": 0.4978165939,
      "PSH": 65.52047064,
      "PPC": 0.3815383884,
      "PNC": 0.2261081658,
      "PPA": 1830.66,
      "Solvation energy": -7582.112303,
      "Binding energy": 102.0126113,
      "Dipole moment": 92.92275419,
      "Hydrophobic moment": 75747.94102,
      "Amphipathicity": 1.680330839,
      "SAP score": 85.065,
    },
];

const columnRanges = {
    "Isoelectric point": { low: 6, high: 8 },
    "Hydrophobicity": { low: -0.3, high: -0.2 },
    "SAP score": { low: 80, high: 100 },
    "Binding energy": { low: 20, high: 50 },
    "Fv net charge": { low: 0, high: 4 },
    "BSA": { low: 700, high: 800 },
    "Hydrodynamic radius": { low: 23.5, high: 24 },
    "Helix ratio": { low: 0.03, high: 0.04 },
    "Sheet ratio": { low: 0.48, high: 0.52 },
    "PSH": { low: 65, high: 75 },
    "PPC": { low: 0.4, high: 0.6 },
    "PNC": { low: 0.1, high: 0.3 },
    "PPA": { low: 1800, high: 2200 },
    "Solvation energy": { low: -8500, high: -7500 },
    "Dipole moment": { low: 90, high: 120 },
    "Hydrophobic moment": { low: 60000, high: 75000 },
    "Amphipathicity": { low: 0.8, high: 1.2 },
    "Extinction coeff": { low: 45000, high: 55000 },
  };

const handleButtonClick = (row) => {
  console.log("Button clicked for row:", row);
  alert(`You clicked on: ${JSON.stringify(row)}`);
};

const App: React.FC = () => (
  <div>
    <Table
      data={data}
      ranges={columnRanges}
      cellColors={{ light: "green", dark: "red" }}
      buttonText="Open"
      buttonFunction={handleButtonClick}
      headingColors={{ text: "blue", background: "#e0f7fa" }}
      rowColors={{ text: "black", background: "#f3f3f3" }}
    />
  </div>
);

export default App;

Component

<Table
  data={data}
  buttonText="View Details" // custom text for the button on the end column
  buttonFunction={customFunction} //return click row in object format
  headingColors={{ text: "blue", background: "#e0f7fa" }}
  rowColors={{ text: "black", background: "#f3f3f3" }}
  ranges={columnRanges} // ranges to color each cell
  cellColors={{ light: "green", dark: "red" }} // color ranges
/>

Props

| Prop | Type | Required | Default | Description | |---|---|---|---|---| | data | json | ✅ | N/A | displays json data in table format | The array of objects containing the data to be displayed in the table. | | onViewClick | function | ❌ | N/A | return clicked row | A function to be called when the "View" button is clicked for a specific row. | | headingColors | { text: string; background: string } | ❌ | { text: "black", background: "#f2f2f2" } | An object to customize the color of the table headers. text controls the text color and background controls the background color of the header. | | rowColors | { text: string; background: string } | ❌ | { text: "black", background: "white" } | An object to customize the color of table rows. text controls the text color and background controls the background color of each row. | | buttonText | string | ❌ | N/A | The text to be displayed on the button inside each row. If not provided, no button will be shown. | | buttonFunction | function | ❌ | N/A | A function to be called when the button in a row is clicked. returns clicked row in object format | | ranges | json | ❌ | N/A | Data to color each cell individually, pass the ranges in json format, the columns in json should match the column in table data | | cellColors | { light: "green", dark: "red" } | ❌ | N/A | colors according to the ranges from low to high |