@malga/data-table

Instalação

Para instalar o pacote, utilize:

pnpm add @malga/data-table

ou com Yarn:

yarn add @malga/data-table

ou com npm:

npm install @malga/data-table

Uso

Importe e utilize o componente dentro do seu projeto React:

import { DataTable, DataTableColumn } from "@malga/data-table";

function App() {

  const [pagination, setPagination] = useState({
    currentPage: 1,
    itemsPerPage: 10,
    totalPages: 10,
    totalItems: 100,
    itemCount: 10,
  })

  interface Data {
    id: string
    name: string
  }

  const data = [
    { id: "12", name: "John Doe" }, 
    { id: "13", name: "Jane Doe" },
  ]

  const columns: DataTableColumn = [
    { header: "ID", accessorKey: "id" },
    { header: "Name", accessorKey: "name" },
  ]

  return (
    <DataTable>
      <DataTable.Content data={data} columns={columns} />
      <DataTable.Pagination pagination={pagination}>
        <DataTable.PaginationGroup justifyContent="space-between">
          <DataTable.ItemsPerPage
            handleItemsPerPageChange={(value) => {
              setPagination((pagination) => ({...pagination, itemsPerPage: value}))
            }}
            itemsPerPageOptions={[10, 20, 30]}
          />
          <DataTable.PaginationCount />
        </DataTable.PaginationGroup>

        <DataTable.PaginationGroup justifyContent="flex-end">
          <DataTable.PaginationIndicator 
            onPageChange={(page) => setPagination((prev) => ({ ...prev, currentPage: page }))}
          />
          <DataTable.PaginationControls
            onFirstPage={() => setPagination((prev) => ({ ...prev, currentPage: 1 }))}
            onLastPage={() => setPagination((prev) => ({ ...prev, currentPage: prev.totalPages }))}
            onNextPage={() => setPagination((prev) => ({ ...prev, currentPage: prev.currentPage + 1 }))}
            onPreviousPage={() => setPagination((prev) => ({ ...prev, currentPage: prev.currentPage - 1 }))}
          />
        </DataTable.PaginationGroup>
      </DataTable.Pagination>
    </DataTable>
  )
}