1

I am creating an admin panel which is a big project & contains a lot of tables. after creating few tables I have noticed that I am repeating my table code & then I thought of creating my custom table component. as you read my question title I Don't want to use a package, I want to create my own.

My all tables have few same repeated columns like id, Status, Action Buttons (CRUD Buttons).

  1. I have Lot of Tables.
  2. Keys and Values should be dynamic.

I was able to render table data, But having problems while rendering status & action columns.

I want my data should be rendered like this, Status & Action cols are important

This is the React Js Code.

<div className="app-wrapper">
  <DataTable headings={headings} rows={userData} />    
</div>

This is the dummy API data for your reference. KEYS & Values will be different for each table (Obviosly)

[
{
    "title": "Data fetched successfully",
    "error": false,
    "total": 5,
    "ListData": [
        {
            "Id": "2229FD72-3D74-41B7-BBC4-ECBFFCC75709",
            "UserTypeStatus": 1,
            "UserTypeName": "Payroll",
            "UserTypeShortName": "PR",
            "UserTypeHierarchyOrder": 5
        },
        {
            "Id": "16184F43-3789-44AC-BB73-C07693533D7E",
            "UserTypeStatus": 1,
            "UserTypeName": "Rahul Payroll",
            "UserTypeShortName": "PR",
            "UserTypeHierarchyOrder": 6
        },
        {
            "Id": "19B923A8-88DE-48B5-BD1A-77AC25B41B34",
            "UserTypeStatus": 1,
            "UserTypeName": "User",
            "UserTypeShortName": "UR",
            "UserTypeHierarchyOrder": 7
        },
        {
            "Id": "8BB60DCB-B3E3-4EF0-8602-F27579FF855A",
            "UserTypeStatus": 1,
            "UserTypeName": "Developer",
            "UserTypeShortName": "DP",
            "UserTypeHierarchyOrder": 8
        },
        {
            "Id": "6BDFA417-0658-451A-BFB2-B5002828A1D9",
            "UserTypeStatus": 1,
            "UserTypeName": "Admin",
            "UserTypeShortName": "AD",
            "UserTypeHierarchyOrder": 9999
        }
    ]
}

]

Rahul More
  • 514
  • 6
  • 10
  • 1
    What problems are you facing exactly? Please provide more context on the matter. – Alimo Oct 08 '21 at 19:25
  • I want to render the Status & Action buttons (as shown in the picture ) dynamically. but I was not able to do that. – Rahul More Oct 08 '21 at 19:31
  • "Having problems" isn't an adequate description. Please review [ask] and revise to be more specific. In particular, where are you trying to set the buttons? I'd have expected component props for that, or perhaps properties in the data object. – isherwood Oct 08 '21 at 19:53
  • I have only API data that's it and now I want table as shown in image. – Rahul More Oct 08 '21 at 20:20

1 Answers1

0
const Table = ()=>{
return(
 <table>
   <tr>
    <th>id<th>
    <th>name<th>
    <th>statut<th>
    <th>action<th>
   </tr>
    {ListData.map((item)=>{
       return <tr key={item.id}>
      <td>{item.id}</td>
      <td>{item.name}</td>
      <td><button>{status}</button></td>
      <td><button>action1</button><button>action2</button></td>
      </tr>
     })}
 </table>
)
}
JOo
  • 17
  • 5
  • Your solution is Just for this API. What if there is another Api with different column name? Then I have to change that keys again in New table. – Rahul More Oct 08 '21 at 19:44
  • 1
    Please read my question again. I have lot of tables not just a single table. I don't want to keep changing keys in other tables. – Rahul More Oct 08 '21 at 19:47