Table Skeleton

`TableSkeleton` component renders a placeholder skeleton for a table with 4 columns and 20 rows, utilizing `Skeleton` components to simulate loading or empty data states visually.

In the src/content/docs/component directory, You can find the TableSkeleton.mdx

Functions

TableSkeleton


const TableSkeleton = () => {
  return (
    <div>
      <div className="w-[98%] rounded-2xl overflow-hidden shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] p-3">
        <div className="grid grid-cols-4 gap-3 mb-4">
          <Skeleton className="w-full h-12 mr-2" />
          <Skeleton className="w-full h-12 mr-2" />
          <Skeleton className="w-full h-12 mr-2" />
          <Skeleton className="w-full h-12 mr-2" />
        </div>

        <div className="grid grid-cols-4 gap-3">
          {[...Array(20)].map((_, index) => (
            <div key={index}>
              <Skeleton className="w-full h-12" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default TableSkeleton;

The TableSkeleton component is used to render a skeleton loading effect for a table while its content is being fetched or loaded. It consists of placeholder elements with the same dimensions as the table rows and columns, mimicking the layout of the actual table. This provides users with visual feedback indicating that data is loading, enhancing the user experience.