Componente de DataTable

O DataTable permite exibir informações organizadas em uma tabela, com suporte para busca, paginação, e colunas personalizadas.

Como importar

import { DataTable } from '@/app/shared/@JustLaunch/components';

Exemplo de uso

import Image from 'next/image';
import { ColumnDef } from '@tanstack/react-table';

const statuses = {
  Completed: 'text-success/500',
  Error: 'text-red-400',
  Pending: 'text-yellow-400',
};

const activityItems = [
  {
    user: { name: 'Michael Foster', imageUrl: 'https://...256&q=80' },
    commit: '2d89f0c8',
    branch: 'main',
    status: 'Completed',
    duration: '25s',
    date: '45 minutes ago',
    dateTime: '2023-01-23T11:00',
  },
];

const columns: ColumnDef<(typeof activityItems)[0]>[] = [
  {
    accessorKey: 'user',
    header: 'User',
    cell: ({ row }) => (
      <div className='flex items-center'>
        <Image
          width={32}
          height={32}
          src={row.original.user.imageUrl}
          alt={row.original.user.name}
          className='h-8 w-8 rounded-full'
        />
        <span className='ml-2'>{row.original.user.name}</span>
      </div>
    ),
  },
  {
    accessorKey: 'commit',
    header: 'Commit',
    cell: ({ row }) => <span className='font-mono text-sm'>{row.original.commit}</span>,
  },
  {
    accessorKey: 'branch',
    header: 'Branch',
    cell: ({ row }) => <span>{row.original.branch}</span>,
  },
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ row }) => <span className={statuses[row.original.status]}>{row.original.status}</span>,
  },
  {
    accessorKey: 'duration',
    header: 'Duration',
    cell: ({ row }) => <span>{row.original.duration}</span>,
  },
  {
    accessorKey: 'date',
    header: 'Deployed At',
    cell: ({ row }) => <span>{row.original.date}</span>,
  },
];

<DataTable columns={columns} data={activityItems} searchColumn='branch' pageSize={5} />

Sem Input de Busca

<DataTable columns={columns} data={activityItems} pageSize={5} />