[Enhancement request]: Refactor and recreate List component

[rockingrohit9639]

Contact Details

No response

Is your feature request related to a problem? Please describe?

We can improve List component and recreate a DynamicTable component with all the edge cases.

Describe the solution you'd like

I am thinking to create a component which dynamically generated the table based on the column definitions. We can handle different kind of edge cases like hidden, custom render etc.

Here is a simple API that I am thinking to create for the Table

export type ColumnDef<TData> = {
  /**
   * Key to access the data for a cell from an item object
   */
  key: string;
  /**
   * Header for the column
   */
  title: string;
  /**
   * Type of the column
   */
  type: "text" | "image";
  /**
   * An additional function to render the cell
   */
  render?: (item: TData) => React.ReactNode;
  /**
   * A function to handle if the column
   */
  hidden?: (item: TData) => boolean;
  /**
   * Additional style for the cell like col-span etc
   */
  className?: string;
};

Here are the TableProps

type TableProps<TData> = {
  className?: string;
  style?: React.CSSProperties;
  columns: ColumnDef<TData>[];
  data: TData[];
  emptyState?: {
    title: string;
    text: string;
    newButtonRoute: string;
    newButtonContent: string;
    buttonProps?: any;
  };
};

If we have this data then we can generate the headers dynamically by looping over the columns like this

{columns.map((column) => (
    <div
        key={column.key}
        className="p-4 text-left font-normal text-gray-600 md:border-b md:px-6"
   >
       {column.title}
    </div>
))}

Then we can use our table component like this

<DynamicTable
    data={items}
    columns={[
      {
         key: "id",
         title: "Asset Name",
         type: "text",
       },
    ]}
/>

Describe alternatives you've considered

No response

Additional context

No response