react-table-builder

'react-table-builder' is a React component library that allows you to easily display tables with columns and fetch data from external sources. With react-json-table, you can create dynamic tables in your React applications by simply passing JSON data and column configuration.

'react-table-builder' is a React.js library for making life easy if you want to fetch data and display on table.

Installation

You can install react-json-table via npm:

npm install react-table-builder

Usage

To use react-table-builder, import the DynamicTable component into your React component and pass the JSON data and column configuration as props.

import DynamicTable from "react-table-builder";

function App() {
  const appData = {
    id: 1,
    title: "ContactUs Form Filled Data",
    isEditable: true,
    apiURL: "http://localhost:8081/contactus", // This URL will be used to fetch data from database
    multiRecords: true,
    pageSize: 10, // Page Size, if you want to add pagination, if not required, remove this key.
    srNo:true, // If you want Serial number at the starting of table
    data: [
      {
        id: 1,
        name: "firstName", // Column key name expecting from api responce
        displayName: "First Name", // Column name to be displayed
        displayOnTable: true, // If you want to display on table
        input: "text",
        isActive: true,
      },
      {
        id: 2,
        name: "lastName", 
        displayName: "Last Name",
        order: 2,
        editable: true,
        displayOnTable: true,
        input: "text",
        isActive: true,
        dataType: "String",
        required: "Please enter last name",
        isSearchable: true, // This field will be usefull for filtering column
      },
      {
        id: 3,
        name: "email",
        displayName: "Email",
        order: 3,
        editable: true,
        displayOnTable: true,
        input: "text",
        isActive: true,
        dataType: "String",
        required: "Email Address is required",
        pattern: {
          value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, // This will be usefull in nearest future
          message: "Please Enter valid Email address",
        },
        isSearchable: true,
      },
      {
        id: 4,
        name: "phone",
        displayName: "Phone",
        order: 4,
        editable: true,
        displayOnTable: true,
        input: "text",
        isActive: true,
        dataType: "String",
        required: "Phone Number is required",
        isSearchable: true,
        pattern: /^\+?[0-9\s-]+$/,
      },
      {
        id: 5,
        name: "message",
        displayName: "Message",
        order: 5,
        editable: true,
        displayOnTable: false,
        input: "textarea",
        isActive: true,
        dataType: "String",
        required: "Please add some message here",
      },
    ]
};
return (
    <div className="App">
     <DynamicTable
        appData={appData}
        className="table"
        editClicked={(data) => console.log(data)} // If 'isEditable' set to true then this function will be called on click of edit button 
      />
    </div>
  );
}

Output

Where all the data will be fetched from apiURL "http://localhost:8081/contactus" which is mentioned in appData.

Sample Response data

if pageSize is added any numeric value 'react-table-builder' will call apiURL as

http://localhost:8081/contactus/2/1 where 2 = no. of elements on 1 page & 1 = currunt page number

and below responce will be expected from api.

{"data":[{"_id":"65e99135ceabdf91793a3d20","firstName":"Harshita","lastName":"Narwade","email":"[email protected]","phone":"9187645679","message":"Sample New Message here","__v":0},{"_id":"65e9910aceabdf91793a3d1e","firstName":"Vishal","lastName":"Gaikwad","email":"[email protected]","phone":"9175129361","message":"Sample Message","__v":0}],"pagination":{"count":4,"perPage":"2","page":"1"}}