To get started with the Table component, first, make sure that you have Chakra UI properly installed in your project. You can install it via npm or yarn:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Or

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Once you have Chakra UI installed, you can start using the Table component in your code. Here’s an example of how to create a basic table:

import { Table, Thead, Tbody, Tr, Th, Td } from "@chakra-ui/react";

function MyTable() {
  return (
    <Table variant="striped" colorScheme="teal">
      <Thead>
        <Tr>
          <Th>Header 1</Th>
          <Th>Header 2</Th>
          <Th>Header 3</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td>Data 1</Td>
          <Td>Data 2</Td>
          <Td>Data 3</Td>
        </Tr>
        <Tr>
          <Td>Data 4</Td>
          <Td>Data 5</Td>
          <Td>Data 6</Td>
        </Tr>
      </Tbody>
    </Table>
  );
}

export default MyTable;

In this example, we import the necessary components from Chakra UI and create a functional component called MyTable. Inside the component, we use the Table component and its child components (Thead, Tbody, Tr, Th, and Td) to define the structure and content of the table.

The variant prop on the Table component allows you to specify the style variant for the table. In this case, we use the “striped” variant. The colorScheme prop sets the color scheme for the table. Here, we use the “teal” color scheme.

You can customize the table further by applying additional props or styles to the components. Chakra UI provides a wide range of props and utilities for styling and customization.

That’s it! You can now create tables using the Table component in Chakra UI. So go ahead and start building beautiful and functional tables in your React projects. Happy coding!

#ChakraUI #ReactComponents