table-view-react
Version:
A customizable, reusable table component for React that allows dynamic row rendering, customizable headers, optional buttons in each row, and click event handling.
148 lines (126 loc) • 6.35 kB
Markdown
# 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:
```bash
npm install table-view-react
```
## Usage
- To use the Table component, import it into your React component and pass the required props.
## Example
```bash
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
```bash
<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 |