Tailwind Table

Simple usage customizable table with TailwindCSS e Typescript

How to use?

The Table component can recives this parameters:

• data
• columns
• pagination
  • PaginationItemsPerPageProps
• paginationTexts
• classNames
• tableHeadClassNames
• tableRowsClassNames

• 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.

You can see the result here.

Contributing

Feel free to contribute 😁