Menu Close
  • Appcodemia
  • react
  • React : สร้างตารางข้อมูล Table ด้วย React Table และ Chakra UI พร้อม publish ไปไว้ที่ NPM

React : สร้างตารางข้อมูล Table ด้วย React Table และ Chakra UI พร้อม publish ไปไว้ที่ NPM

adaydesign 0 Comments

สวัสดีครับ ในบล็อกนี้จะเป็นเรื่องของการสร้างตารางด้วย React Table v.7 (ต้องใช้กับ React v.16.8 ขึ้นไป) และ Chakra UI ที่ทำให้เราไม่ต้องใช้ css เลย เมื่อสร้าง Table เสร็จแล้วก็นำเข้า NPM เพื่อเอาไว้ใช้อนาคตได้อีกด้วย

ขั้นตอนการทำ ก่อนอื่นเราจะต้องสร้าง Table ของเราขึ้นมาโดยจะนำ React Table มาตกแต่งส่วน Header Body Table ด้วย Chakra UI ก่อน แล้วจึงสร้างเป็น lib เพื่อนำเข้าที่ NPM ต่อไป

การสร้าง Table ด้วย React Table

1. สร้างโปรเจคด้วย Create React App หรือ Vite (ตามสะดวก ในตัวอย่างจะสร้างด้วย Create React App)

npx create-react-app react-chakra-ui-table

2. ติดตั้ง React Table และ Chakra UI + Icons จำนวน 5 คำสั่ง ได้แก่

  • ติดตั้ง react-table (ตาราง)
  • ติดตั้ง chakra-ui
  • ติดตั้ง chakra-ui/icons
  • ติดตั้ง react-icons (ไอคอน)
  • ติดตั้ง react-select (dropdown ที่สามารถพิมพ์ค้นหาได้)
npm install react-table --save
npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
npm install @chakra-ui/icons
npm install react-icons --save
npm install --save react-select

3. จัดการโฟลเดอร์ในโปรเจค เพื่อรองรับการทำเป็น library ที่สามารถนำเข้า NPM ดังนี้ (ตามตัวอย่างในบทความ React : วิธีการสร้างและเผยแพร่ React Package บน Npm )

src
|--lib
|----components
|------ChakraUITable.js (ไฟล์ component ที่เรากำลังจะสร้างเป็น Table ขึ้นมาใช้งาน)
|----index.js (ไฟล์ index ไว้รวม component ที่สร้างขึ้น)
|--App.js
|--index.js

4. เริ่มต้นสร้าง table component ที่ไฟล์ ChakraUITable.js

ดูต้นแบบการสร้าง table จาก https://react-table.tanstack.com/docs/quick-start#applying-the-table-instance-to-markup

4.1 สร้าง component เปล่าขึ้นมา (ตัวอย่างจะใช้ ChakraTable เป็นตัวอย่างในการเริ่มใช้งาน React-Table เบื้องต้น เพื่อจะทำให้เราเห็นการนำ React-Table มาปรับใช้งานได้ และไฟล์ ChakraUITable จะเป็นไฟล์ component ที่สมบูรณ์แล้ว)

const ChakraTable = () => {
    return (
        <div>
            
        </div>
    )
}

export default ChakraTable

4.2 ก้อปปี้โค้ดตัวอย่างการสร้างตารางของ React Table มาใส่ไว้ใน ChakraTable

  • เพิ่ม import { useTable } from ‘react-table’
  • เพิ่ม props ของ ChakraTable ประกอบด้วย columns และ data

เราจะใช้ตัวอย่างจาก React table ไปก่อนแล้วจึงมาปรับใช้ Chakra UI ใส่เข้าไปทีหลัง

import { useTable } from 'react-table'

const ChakraTable = ({ columns, data }) => {
    const tableInstance = useTable({ columns, data })
 
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
    } = tableInstance
    
    return (
      // apply the table props
      <table {...getTableProps()}>
        <thead>
          {// Loop over the header rows
          headerGroups.map(headerGroup => (
            // Apply the header row props
            <tr {...headerGroup.getHeaderGroupProps()}>
              {// Loop over the headers in each row
              headerGroup.headers.map(column => (
                // Apply the header cell props
                <th {...column.getHeaderProps()}>
                  {// Render the header
                  column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        {/* Apply the table body props */}
        <tbody {...getTableBodyProps()}>
          {// Loop over the table rows
          rows.map(row => {
            // Prepare the row for display
            prepareRow(row)
            return (
              // Apply the row props
              <tr {...row.getRowProps()}>
                {// Loop over the rows cells
                row.cells.map(cell => {
                  // Apply the cell props
                  return (
                    <td {...cell.getCellProps()}>
                      {// Render the cell contents
                      cell.render('Cell')}
                    </td>
                  )
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
    )
}

export default ChakraTable

4.3 นำ ChakraTable ไปใช้งานที่หน้า App

สร้าง component SimpleTable ขึ้นมาใน App เพื่อกำหนดค่า Column และ Data และเรียกใช้งาน ChakraTablue 

import { ChakraProvider, Flex, Heading, Text } from '@chakra-ui/react'
import ChakraTable from './lib/components/ChakraTable';

// Example Simple React Table
const SimpleTable = ()=>{
  const columns = [
    {
      Header: '#',
      Cell: ({ row }) => (<Text>{row.index + 1}</Text>)
    },
    {
      Header: 'Name',
      accessor: 'name',
    },
    {
      Header: 'Address',
      accessor: 'address',
    }
  ]

  const data = [
    {
      name:"Mr.A",
      address:"123 abc Road , A City"
    },
    {
      name:"Mr.B",
      address:"6-10 bb Road , BB Town"
    },
    {
      name:"Mr.C",
      address:"100-2 cc Road , C1 City"
    },
    {
      name:"Mr.D",
      address:"123/5 dd Road , D-Dog Village"
    }
  ]

  return <ChakraTable columns={columns} data={data} />
}


function App() {

  return (
    <ChakraProvider>
      <Flex direction="column" p={10}>
        <Heading mb={4}>Demo React ChakraUI Table</Heading>
        <SimpleTable />
      </Flex>
    </ChakraProvider>
  )
}

export default App

4.4 รันทดสอบโปรแกรมเบื้องต้นก่อน จะได้ผลลัพธ์เป็นตารางในลักษณะดังนี้

4.5 กลับไปปรับใช้ Chakra UI ที่ ChakraTable.js

การใน Chakra UI มาปรับใช้ จะต้อง import chakra component ก่อน

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

และใช้ component ที่ Chakra UI เตรียมไว้ให้ ได้แก่ Table, Tbody, Td, Th, Thead, Tr นำไปแทนที่ table, tbody, td, th, thead และ tr ตามลำดับ

import { useTable } from 'react-table'
import {Table, Th, Tr, Td, Thead, Tbody} from '@chakra-ui/react'

const ChakraTable = ({ columns, data }) => {
    const tableInstance = useTable({ columns, data })
 
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
    } = tableInstance
    
    return (
      // apply the table props
      <Table {...getTableProps()}>
        <Thead>
          {// Loop over the header rows
          headerGroups.map(headerGroup => (
            // Apply the header row props
            <Tr {...headerGroup.getHeaderGroupProps()}>
              {// Loop over the headers in each row
              headerGroup.headers.map(column => (
                // Apply the header cell props
                <Th {...column.getHeaderProps()}>
                  {// Render the header
                  column.render('Header')}
                </Th>
              ))}
            </Tr>
          ))}
        </Thead>
        {/* Apply the table body props */}
        <Tbody {...getTableBodyProps()}>
          {// Loop over the table rows
          rows.map(row => {
            // Prepare the row for display
            prepareRow(row)
            return (
              // Apply the row props
              <Tr {...row.getRowProps()}>
                {// Loop over the rows cells
                row.cells.map(cell => {
                  // Apply the cell props
                  return (
                    <Td {...cell.getCellProps()}>
                      {// Render the cell contents
                      cell.render('Cell')}
                    </Td>
                  )
                })}
              </Tr>
            )
          })}
        </Tbody>
      </Table>
    )
}

export default ChakraTable

จะเห็นได้ว่า การเปลี่ยน component จาก html เป็น chakra component เปลี่ยนได้ไม่ยากเลย เนื่องจาก chakra ui ได้ทำการสร้าง component ที่ชื่อเดียวกับ html tag ไว้ให้เราใช้งานอยู่แล้ว

ลองเพิ่ม property ของเทเบิล ทำให้แสดงสีของแถวสลับสีกัน โดยเพิ่ม variant=”striped” และ colorScheme=”สี” สามารถใส่ชื่อสีลงไปได้เช่น red, green, blue, purple เป็นต้น ในตัวอย่างใช้ blue

<Table variant="striped" colorScheme="blue" {...getTableProps()}>

เมื่อรันโปรแกรมจะได้ผลลัพธ์ดังนี้

property ต่างของ Table และ component อื่นๆ สามารถนำมาปรับแต่งให้ตารางของเราสวยงามและน่าใช้มากยิ่งขึ้น อ่านเพิ่มเติมที่ https://chakra-ui.com/docs/data-display/table

การ Publish เข้า NPM

ในการ Publish ไลบรารี่ หรือ component ไปไว้ที่ NPM ได้เขียนวิธีทำไว้ที่

React : วิธีการสร้างและเผยแพร่ React Package บน Npm

แล้ว สามารถศึกษาและทำตามตัวอย่างได้เลย

และในบล็อกนี้เราได้สร้าง NPM ของ Table นี้ขึ้นมาอีก 1 ตัว โดยทำไว้ที่

https://www.npmjs.com/package/react-chakra-ui-table

วิธีการติดตั้งและใช้งานไลบรารี่ ที่เรานำเข้า NPM แล้ว

ติดตั้งไลบรารี่ที่จำเป็นดังนี้

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

การนำไปใช้ได้ ดังนี้

import "./styles.css";
import { ChakraProvider, Text } from "@chakra-ui/react";
import { ChakraUITable } from "react-chakra-ui-table";

const SimpleTable = () => {
  const columns = [
    {
      Header: "#",
      Cell: ({ row }) => <Text>{row.index + 1}</Text>
    },
    {
      Header: "Name",
      accessor: "name"
    },
    {
      Header: "Address",
      accessor: "address"
    }
  ];

  const data = [
    {
      name: "Mr.A",
      address: "123 abc Road , A City"
    },
    {
      name: "Mr.B",
      address: "6-10 bb Road , BB Town"
    },
    {
      name: "Mr.C",
      address: "100-2 cc Road , C1 City"
    },
    {
      name: "Mr.D",
      address: "123/5 dd Road , D-Dog Village"
    }
  ];

  return <ChakraUITable columns={columns} data={data} />;
};

export default function App() {
  return (
    <ChakraProvider>
      <div className="App">
        <h1>Demo React ChakraUI Table</h1>
        <h2>by react-chakra-ui-table</h2>
        <h4>https://www.npmjs.com/package/react-chakra-ui-table</h4>
        <SimpleTable />
      </div>
    </ChakraProvider>
  );
}

ตัวอย่างโค้ดโปรแกรมบน Code Sandbox

ดูผลลัพธ์การรันโปรแกรมที่

https://demo-chakra-ui-table-2.netlify.app/

สรุป

วิธีการสร้าง Table เองด้วย React Table นั้นสามารถทำง่ายมาก เนื่องจาก React Table ได้เตรียม Hook Function ไว้ให้ใช้งานในการสร้างตารางเรียบร้อยแล้ว และได้มีโค้ดตัวอย่างการสร้างตารางแบบง่ายๆ มาให้ดูด้วย เราสามรถศึกษาจากตัวอย่างของ React Table โดยดูจากโค้ดของการสร้าง Table Th Thead Tbody Tr Td ได้เลย และวิธีการนำ ChakraUI มาใช้กับการตกแต่ง React Table ที่สร้างขึ้นมา ก็สามารถทำได้โดยการ import การใช้งาน ChakraUI และทำการเปลี่ยน table html tag เป็น Chakra Commponent เท่านี้เราก็จะสามารถนำ ChakraUI มาใช้กับ React Table ได้แล้ว

สำหรับการปรับแต่ง React Table ให้มีฟังก์ชันและลูกเล่นต่างๆ ติดตามได้ในบทความหน้านะครับ

อ้างอิง

  1. https://react-table.tanstack.com/
  2. https://reactjs.org/docs/create-a-new-react-app.html
  3. https://chakra-ui.com/docs/getting-started
  4. https://react-icons.github.io/react-icons/
  5. https://react-select.com/home#getting-started
  6. https://chakra-ui.com/docs/data-display/table
Post Views: 4,716
Posted in react
Tagged , , , , ,

About the Author: adaydesign

View all post by adaydesign | Website

ใส่ความเห็น