มาลองเล่น Tanstack Table V8 บน React 18 กันเถอะ ตอนที่ 1

ในบทความนี้เราจะมาลองเล่น Tanstack Table V8 หรือ React Table กัน โดยบทความนี้ใช้ React 18 นะครับ ก็เรามาแวะดูข้อดี/ข้อเสียกันก่อนละกัน

TanStack | High Quality Open-Source Software for Web Developers

ข้อดี:

• สามารถจัดการกับ Style ของ Table ได้แบบอิสระ ไม่ว่าจะใช้เป็น (CSS, CSS-in-JS, UI Libraries, etc)
• มีขนาดที่เล็ก

ข้อเสีย:

• ต้อง Config Options ต่างๆของ Table เพิ่มเติม
• ไม่มี Style หรือ Theme มาให้

ก่อนที่จะเริ่ม เราจะมาเตรียม API ที่จะเอาไว้ใช้ในการ Plugin Data เข้ากับ Tanstack Table ของเรา โดยจะใช้ mockapi.io รายระเอียดเพิ่มเติมดูได้ที่ Docs นี้ได้เลย

mockapi.io

ตัวอย่าง Schema ที่ใช้ในบทความนี้

เมื่อสร้างเสร็จแล้วก็ ลองกดที่ปุ่ม Generate all หรือเลือกจำนวนข้อมูลที่ต้องการจะ Generate ได้ตรงลูกศรสีแดงโดย Limit จะอยู่ที่ 100

จากนั้นลองเข้าไปที่ API endpoint ตามด้วย /Users หรือคลิ๊กที่ชื่อ Resource เราก็จะได้ Data ของ User มาแล้ว

ต่อมาก็จะลง React โดยใช้ create-react-appกันนะครับ หรือรายละเอียดเพิ่มเติมดูได้ ที่นี้ เลย

npx create-react-app my-app
cd my-app
npm start

ต่อมาเราจะต้องลง Package ของ Tanstack Table เพิ่มก่อนด้วย

npm install @tanstack/react-table

ถัดมากลับไปที่ Project React เราจะลบ Style เดิมใน src/index.css ออกแล้วแทนที่ด้วย Style ใหม่จาก Example ของ Tanstack Table

ต่อมาเราจะมากำหนด Columns ของตารางกันว่าเราจะแสดงข้อมูลอะไรบ้างภายในตารางของเราภายในไฟล์ src/App.js โดยในตัวอย่างจะมี columns ดังนี้

ถัดมาเราก็จะมาสร้าง state มาเก็บข้อมูลที่จะแสดงในตาราง แล้วก็ส่วนของ useReactTable ในการประกอบร่างของข้อมูลและตารางเข้าด้วยกัน เพื่อนำไปใช้ในส่วนการแสดงผลจากข้างต้นที่มีการใช้ตัวแปร table ต่างๆ

const [data, setData] = useState({
  listUsers: [],
  isFetching: false
});
const table = useReactTable({
  data: data.listUsers ?? [],
  columns,
  getCoreRowModel: getCoreRowModel()
});

ต่อมาจะเพิ่มส่วนตารางโดยใช้ต table จากข้างบนที่ได้ประกาศไว้ แต่ผมจะแอบเพิ่มในส่วนของ Pagination, Sorting, Filter ตามตัวอย่างใน Docs

แล้วก็ต้องเพิ่ม Component Filter ด้วยเอาไว้แสดงช่อง Filter ภายในตาราง โดยจะมี useCallback มาคลุมไว้ด้วยไม่งั้นเวลาเรากรอกแล้ว Filter จะถูก render ใหม่ทำให้ Cursor ที่กำลังกรอกอยู่หายไปทำให้กรอกต่อไม่ได้

ต่อมาเราก็จะมาต่อกับ API จาก mockapi.io เพื่อจะเอาข้อมูลมาแสดงในตารางมาเก็บไว้ใน state ที่เราได้สร้างไว้ก่อนหน้านี้

useEffect(()=>{
  (async()=>{
    setData({...data, isFetching: true});
    const endPoint = `https://6329480ed2c97d8c5264184f.mockapi.io/Users`;
    const dataList = await fetch(endPoint);
    const listUsers = await dataList.json();
    setData({...data, listUsers: listUsers.data, pageCount: listUsers.pageCount, isFetching: false});
  })();
}, []);

เมื่อนำโค้ดทุกส่วนมาประกอบร่างกันจะได้ดังนี้

และนี้คือหน้าตาของตารางของเรา

ในบทความนี้เราก็ได้ลองสร้าง Table ด้วย Tanstack Table แล้วนำข้อมูลจาก API มาแสดงได้กันแล้ว แต่เราจะขอจบบทความนี้ไว้เพียงเท่านี้ก่อน เนื้อหาเริ่มจะยาวเกินไป เดียวงงๆ ขอแยกตอนถัดไปเป็นการทำในส่วนของ Pagination, Sorting, Filter ข้อมูลกันต่อนะครับ

ถ้ามีผิดพลาดตรงไหนก็ขออภัยด้วยนะครับ และสุดท้ายนี้ก็ขอขอบคุณทุกคนที่หลงเข้ามาอ่านถึงตรงนี้นะครับ