Chakra UI Data Display Table
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:
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" > w3wiki - 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; |
Steps to run the application:
Step 1: Type the following command in terminal
npm start
Step 2: Open web-browser and type the following URL
http://localhost:3000/
Output: