Library React untuk Membuat Table - Blog - Naufaldi Rafif Satriya

Beberapa waktu lalu, saya mendapatkan tugas untuk bisa memvisualisasi data dari Backend dengan berbagai ragam jenis data. Nah, salah satu cara dengan menampilkan list data adalah dengan menggunakan Table, otomatis saya mencoba mencari kira-kira penggunaan Table di ReactJS itu apa saja. Akhirnya, menemukan 2 React Table yang sesuai dengan kebutuhanku.

Kebutuhanku itu diantaranya

• Compatible dengan Typescript
• Compatible dengan Material UI React
• Dokumentasi yang jelas
• Pengguna yang banyak sehingga saat ada kendala, kita bisa mudah bertanya.

Maka, ketemulah 2 React Table ini, yang memenuhi kriteria tersebut. Sekaligus bisa menjadi rekomendasi temen-temen karena kalau melihat dari Top 5 React Table atau React Example Table hanya memberikan list, namun belum bisa memberikan beberapa pertimbangan terkait dengan setelah digunakan seperti apa.

# React Data Table Component

Contoh Table

By default memang simple, namun ini yang dicari. Karena kita bisa melakukan custom dan integrasi dengan Framework CSS lain seperti

• Boostrap
• Material UI

Selain itu, ada fitur fitur yang memutuskan aku untuk menggunakan table ini. Antara lain fitur yang ada

• Sorting
• Resize Column
• Responsive
• Select Row ( Berguna untuk membuat Edit / Remove data berdasarkan Row)
• Pagination
• Export CSV

Salah satu krusialnya juga menggunakan React Data Table, karena compatible dengan Typescript. Update dari React Data Table, saat tulisan ini ditulis (  5 Januari 2022 ) , type diupdate pada 30 hari yang lalu.

[

Update types.ts by Dragate · Pull Request #938 · jbetancur/react-data-table-component

Since 7.4.0 (e0236e0), Primitive type was introduced which didn't allow data to have optional/undefined fields or have null values in a typescript project. This PR addresses this issue.EDIT: H...

](https://github.com/jbetancur/react-data-table-component/pull/938?ref=blog.naufaldi.com)

Saat ini, komunitas sedang mengembangkan React Data Table versi 7 yang akan menggunakan Typescript(versi sebelumnya menggunakan Javascript)  sehingga type checking lebih mudah.

Jadi, kalau mau simple Table yang juga dukungan komunitas cukup tinggi, bisa menggunakan React Data Table.

Github :

[

GitHub - jbetancur/react-data-table-component: A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling. - GitHub - jbetancur/react-data-table-component: A responsive table library with ...

](https://github.com/jbetancur/react-data-table-component?ref=blog.naufaldi.com)

# React Table

Kalau ini lebih simple lagi tampilannya, sehingga mudah untuk kita merubah tampian dan bisa diintegrasikan dengan library lain tidak terlepas Boostrap / Material UI.

Aku menyarankan untuk menggunakan React Table apabila kita sudah terbiasa menggukana Hooks, karena si Reac Table ini menggunakan Plugin Hooks untuk setiap fiturnya, jadi kita akan sangat familiar.

Apalagi, creatornya Tanner Linsley sudah memiliki banyak produk untuk React seperti

• React Query
• React Charts
• React Visual
• dst

[

tannerlinsley - Overview

Husband, Co-Founder, Open source fanatic, React Junkie, Javascripter - tannerlinsley

](https://github.com/tannerlinsley?ref=blog.naufaldi.com)

Awalnya, saat sebelum menggunakan React Data Table, dan memerlukan beberap fitur tambahan. Sayangnya, pada React Data Table, tidak ada. Akhirnya aku migrasi ke React Table. Salah satu fiturnya yaitu

• Fixed Column  / Sticky Column

Ini berguna saat Table dengan width yang panjang, user tetap mengetahui row ini memiliki data dari mana (biasanya data column pertama menjadi acuan)

[

Sticky columns · Issue #848 · tannerlinsley/react-table

Is there any plan to add a feature for fixed or ‘sticky’ columns allowing for horizontal scrolling, in addition to vertical

](https://github.com/tannerlinsley/react-table/issues/848?ref=blog.naufaldi.com)

Sayangnya, ada beberapa type yang tidak sesuai apabila kita menggunakan Typescript. Misalnya pernah dibahas di https://github.com/tannerlinsley/react-table/issues/3468

jadi, kita harus mengakali supaya React Table bisa compatible dengan Type-nya. Ini dibahas juga pada issues #3064

[

React useTable hook with typescript · Issue #3064 · tannerlinsley/react-table

So I have a JavaScript class with useTable. In Java script its been used like below import {useTable, useFilters,useAsyncDebounce,useSortBy,usePagination,} from "react-table"; const {getT...

](https://github.com/tannerlinsley/react-table/issues/3064?ref=blog.naufaldi.com)

Jadi ya harus berhati hati saat menggunakan React-Table dan mengalami permasalah di type checking. Walaupun begitu, aku tetap menggunakan React Table, karena fiturnya lengkap seperti

• Pagination
• Filter
• Fixed Column
• Row Select
• Expanding
• dst

Bahkan kita bisa menambahakan plugin dari komunitas lain apabila dari official React Table tidak ada, seperti sticky column tersebut.

Oh ya, React Table sendiri memang masih Javascript, makanya type checking beberapa ada yang error dan ada yang tidak. Namun, sekarang komunitas sedang ngembangin React Table Typescript.

[

React Table

Hooks for building lightweight, fast and extendable datagrids for React. The best and most top-rated fully open-source table library for React!

](https://react-table.tanstack.com/?ref=blog.naufaldi.com)

Bagikan[](https://twitter.com/share?text=Rekomendasi Library React untuk Membuat Table&url=https://blog.naufaldi.com/rekomendasi-library-react-untuk-membuat-table/ "Twitter")[](https://www.facebook.com/sharer/sharer.php?u=https://blog.naufaldi.com/rekomendasi-library-react-untuk-membuat-table/ "Facebook")[](https://www.linkedin.com/shareArticle?mini=true&url=https://blog.naufaldi.com/rekomendasi-library-react-untuk-membuat-table//&title=Rekomendasi Library React untuk Membuat Table "LinkedIn")[](/cdn-cgi/l/email-protection#66591513040c0305125b34030d090b03080207150f462a0f041407141f46340307051246130812130d462b030b04130712463207040a0340070b165d0409021f5b0e1212165c4949040a09014800070a020f481e1f1c4914030d090b03080207150f4b0a0f041407141f4b14030705124b130812130d4b0b030b041307124b1207040a0349 "Email")

Topik Insight ReactJS Lesson Learned

[

Cara Menonaktifkan Scroll Horizontal pada Visual Studio Code

Secara default, VS Code memiliki fitur untuk membuat kode editor kita bisa…

31 Mar 2022

](/cara-menonaktifkan-scroll-horizontal-pada-visual-studio-code/)[

Tips Meningkatkan Produktifitas dengan Visual Studio Code

Siapa sih yang tidak menggunakan VS Code? Bahkan menurut survey terbaru dari…

14 Nov 2021

](/tips-meningkatkan-produktifitas-dengan-visual-studio-code/)