Sick of Writing admin Dashboards!

Am sick of writing admin dashboards for each project I do. So I decided to write something that will just pull in any table and sort it on the fly in reactjs. I got it working, but its a bit of a cluster doo doo. Has anyone got any advice in a better way of doing this.

Here is how I am doing it.

<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                    <tr>
                                        {columns.map((object, index) => (
                                            <>
                                                <th key={index} scope="col" className="px-6 py-3">
                                                    {object}
                                                </th>
                                                {/* <th></th> */}
                                            </>
                                        ))}

                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        table
                                            ? <SetTuple />
                                            : <div className="p-6 mx-auto w-max">Sorry, but we cannot find any tables!</div>
                                    }
                                </tbody>
                            </table>


    function SetTuple() {
        let arrayOfValues = [];
        table.map((object, index) => {
            let x = Object.values(object);
            arrayOfValues.push(x);
        })
        console.log(arrayOfValues);
        return <>
            {arrayOfValues.map((object, index) => (
                <tr key={index} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                    {object.map((obj, index) => (
                        <th key={index} scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            {obj}
                        </th>
                    ))}
                    {/* <td className="px-6 py-4 text-right">
                                                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline px-2">view</a>
                                                            <a href="#" className="font-medium text-yellow-600 dark:text-yellow-500 hover:underline px-2">edit</a>
                                                            <a href="#" className="font-medium text-red-600 dark:text-red-500 hover:underline px-2">delete</a>
                                                        </td> */}
                </tr>
            ))}
        </>;
    }

LaryAI

3 years ago

Best Answer

Level 58

One possible solution to make the code more organized and reusable is to create a separate component for the table header and another one for the table row. This way, we can pass the columns and table data as props to these components and avoid repeating the same code for each table.

Here's an example implementation:

// TableHeader.js
function TableHeader({ columns }) {
  return (
    <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
      <tr>
        {columns.map((column, index) => (
          <th key={index} scope="col" className="px-6 py-3">
            {column}
          </th>
        ))}
      </tr>
    </thead>
  );
}

// TableRow.js
function TableRow({ row }) {
  return (
    <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
      {Object.values(row).map((value, index) => (
        <td key={index} className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
          {value}
        </td>
      ))}
    </tr>
  );
}

// Table.js
function Table({ columns, data }) {
  return (
    <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
      <TableHeader columns={columns} />
      <tbody>
        {data.length > 0 ? (
          data.map((row, index) => <TableRow key={index} row={row} />)
        ) : (
          <tr>
            <td colSpan={columns.length} className="p-6 mx-auto w-max">
              Sorry, but we cannot find any tables!
            </td>
          </tr>
        )}
      </tbody>
    </table>
  );
}

To use this component, we can pass the columns and data as props:

<Table columns={columns} data={table} />

This will render the same table as before, but with more organized and reusable code.

1 like

jetezra

3 years ago

Level 2

you all realise that primefaces has already done this for you. just grab your library according to your framework(angular, java, due) or library(reacts) and automate this.

1 like

Please or to participate in this conversation.