Hudoro table

Hudoro table is a strict and customizable table component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/table

Instal package using yarn

  yarn add @hudoro/table

Instal package using npm

  npm i @hudoro/table

Usage/Examples

import React from "react";
import {Table, Tbody, Td, Tfoot, Th, Thead, Tr} from "@hudoro/table";
import ReactDOM from "react-dom/client";

const App = () => (
  <div>
    <Table variant="striped">
      <Thead>
        <Tr>
          <Th>th</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td>td</Td>
        </Tr>
        <Tr>
          <Td>td</Td>
        </Tr>
        <Tr>
          <Td>td</Td>
        </Tr>
        <Tr>
          <Td>td</Td>
        </Tr>
      </Tbody>
      <Tfoot>
        <Tr>
          <Td>foot</Td>
        </Tr>
      </Tfoot>
    </Table>
  </div>
);

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

Props @hudoro/table

Props that you can pass to <Table {...props} />

| Prop Name | Value | required | | :-------- | :-------------------------------- | :------- | | fullWidth | boolean | false | | variant | "simple" / "unstyled" / "striped" | true |

Props that you can pass to <Thead {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <Tbody {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <Tfoot {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <Tr {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <Th {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |

Props that you can pass to <Td {...props} />

| Prop Name | Value | required | | :-------- | :-------- | :------- | | children | ReactNode | true |