Tailwind-table NPM

Tailwind Table

Simple usage customizable table with TailwindCSS e Typescript

How to use?

The Table component can recives this parameters:

data:

Array with datas to render on table;

Example:

[
  {
    name: "Sofia Oliveira",
    email: "sofia.oliveira@example.com",
    status: "Ativo",
    role: "Admin",
  },
  {
    name: "João Santos",
    email: "joao.santos@example.com",
    status: "Suspenso",
    role: "Usuário",
  },
];

columns:

Array with columns that will be displayed in the table.

Example:

[
  {
    title: "Nome", // Title of column that will be displayed.
    key: "name", // Key of data object that represents this column.
  },
  {
    title: "Email",
    key: "email",
  },
];

pagination:

Optional. Depending on your pagination method, you can use some techniques to achieve the following information.

Example:

{
    currentPage: number;
    pagesTotal: number;
    itemsPerPageProps: PaginationItemsPerPageProps;
    onClickPrev: MouseEventHandler<HTMLButtonElement>;
    onClickNext: MouseEventHandler<HTMLButtonElement>;
}

The first two attributes are self-explanatory. The last two are callback functions that will be executed when clicking on the pagination buttons.

PaginationItemsPerPageProps are optional and can recive this props:

{
    itemsPerPage: "10";
    text: "Usuários por página";
    setItemsPerPage: (itemsPerPage) => setState(itemsPerPage);
    options: [5,10,20,50];
    classNames: {
	    text: "",
	    input: "",
	    div: "",
	};
}

paginationTexts:

Optional. If you prefer, pass the texts that will appear in the pagination.

Example:

{
    pageText: "Página", // Page
    prevText: "Anterior", // Previous
    nextText: "Próxima", // Next
}

classNames:
Optional. Object that can contain: table, thead, tbody. This add your custom className (tailwind style) to this elements of table.
- Example:
```
{
    table: "rounded-lg",
    thead: "text-gray-800",
    tbody: "bg-white",
}
```
tableHeadClassNames:
Optional. Object that can contain: tr, th. This add your custom className (tailwind style) to this elements of table.
tableRowsClassNames:
Optional. Object that can contain: tr, td. This add your custom className (tailwind style) to this elements of table.