Chakra UI Data Display Table

Last Updated : 05 Feb, 2024

Chakra UI’s Data Display Table is a customizable way to showcase information in your web application. With its clean design and easy-to-use features, you can organize and present your data in a visually appealing manner. Whether you’re displaying a list of products, user profiles or any other data, Chakra UI’s Data Display Table simplifies the process, making your application both functional and aesthetically pleasing. Elevate your user interface with this powerful and user-friendly component.

Prerequisites:

Approach:

We build a table using Chakra UI. We will be using the table components Table, Thead, Tbody, Tfoot, Tr, Th, Td, TableCaption, TableContainer, and so on with different sizes and style properties.

Steps to Create the Project:

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. my-app), move to it by using the following command:

cd gfg

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

Project Structure

The updated dependencies in package.json will look like this:

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Example: Write down the code in respective files:

Javascript

// App.js File
 
import React from 'react';
import { ChakraProvider, Text } from '@chakra-ui/react';
import { Table, Thead, Tbody, Tr, Th, Td, TableContainer} from '@chakra-ui/react'
 
function App() {
    return (
        <ChakraProvider>
            <Text
                color="#2F8D46"
                fontSize="2rem"
                textAlign="center"
                fontWeight="400"
                my="1rem">
                GeeksforGeeks - React JS Chakra UI concepts
            </Text>
 
            <TableContainer w="55%" justify="center" mx="auto">
                <Table size='sm'>
                    <Thead>
                        <Tr>
                            <Th>Name</Th>
                            <Th>Gender</Th>
                            <Th isNumeric>Age</Th>
                        </Tr>
                    </Thead>
                    <Tbody>
                        <Tr>
                            <Td>Anom Mokha</Td>
                            <Td>Male</Td>
                            <Td isNumeric>19</Td>
                        </Tr>
                        <Tr>
                            <Td>Priya Sharma</Td>
                            <Td>Female</Td>
                            <Td isNumeric>24</Td>
                        </Tr>
                        <Tr>
                            <Td>Arun Singh</Td>
                            <Td>Male</Td>
                            <Td isNumeric>32</Td>
                        </Tr>
                        <Tr>
                            <Td>Sam Watson</Td>
                            <Td>Male</Td>
                            <Td isNumeric>43</Td>
                        </Tr>
                    </Tbody>
                </Table>
            </TableContainer>
        </ChakraProvider>
    );
}
 
export default App;