react-detailed-table

ResponsiveTable Component

A reusable React component to render a responsive table with expandable rows and editable tabs.

Installation

Install the package via npm:

npm install responsive-table-component

Usage

import React from 'react';
import DetailedTable from 'responsive-table-component/dist/DetailedTable';

const MyComponent = () => {
  const tableData = [ /* Your table data here */ ];
  const fields = ['name', 'email', 'phone'];
  const tabNames = ['Name', 'Email', 'Phone'];

  const handleUpdate = (recordId, field, newValue) => {
    // Logic to update the record
  };

  const handleDelete = (recordId) => {
    // Logic to delete the record
  };

  const handleSubmitAll = () => {
    // Logic to submit all records
  };

  const renderCustomField = ({ value, onChange, disabled, name }) => {
    // Your custom field rendering logic here
    return (
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        placeholder={name}
      />
    );
  };

  return (
    <ResponsiveTable
      data={tableData}
      fields={fields}
      tabNames={tabNames}
      onUpdate={handleUpdate}
      onDelete={handleDelete}
      onSubmitAll={handleSubmitAll}
      renderField={renderCustomField}
    />
  );
}

export default MyComponent;


Props
data: An array of objects representing the records to be displayed in the table.
fields: An array of strings representing the fields to be displayed as columns in the table.
tabNames: An array of strings representing the names of the tabs corresponding to each field.
onUpdate: A function to handle updates to individual tabs.
onDelete: A function to handle deletion of entire records.
onSubmitAll: A function to handle submission of all changes made to the records.
renderField: A function that renders the input fields for each tab.



This README.md file provides installation instructions, usage examples, and explanations of the props for the `ResponsiveTable` component. You can customize it further based on your specific component and requirements.