Tabel overflow? Ini dia cara mengatasinya

Tantangan terbesar dalam penggunaan tabel konvensional adalah dukungan penggunaan terhadap perangkat beresolusi rendah a.k.a responsiveness. Seringkali penggunaan tabel konvensional menimbulkan permasalahan tersendiri, baik itu permasalahan tabel overflow (offside) ataupun jelek (ugly).

Tabel overflow & ugly

overflow x axis
Gambar oleh: ngaret.com

Tabel, sarana untuk menampilkan data yang relatif bisa disebut sarana konvensional namun hingga saat ini masih tetap digunakan. Bukan tanpa alasan, semua komponen yang terdapat ataupun dapat digunakan dalam melakukan desain (design) web mempunyai ciri khas dan makna tersendiri.

even popular
Gambar oleh: ngaret.com

Tidak semata-mata dikarenakan ‘teknologi lama’ ataupun ‘konvensional’ membuat kita enggan menggunakannya. Ingin tahu bagaimana cara mengatasinya?

Stackable tabel view

stackable table view
Gambar oleh: ngaret.com

Stacktable, library jQuery yang ditulis oleh John Polacek yang memungkinkan tabel konvensional untuk menyesuaikan diri dengan resolusi rendah. Ide yang digunakan oleh John yakni dengan cara membagi tabel tersebut ke dalam dua kolom yakni berdasarkan nama kolom dan nilai kolom tersebut.

Dikutip dari StackTable.JS:

The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens.

Graphic view

graphic view
Gambar oleh: ngaret.com

Tidak melulu soal tabel, kenapa harus tabel? Apakah harus tabel?
Coba tanyakan hal itu sesaat sebelum kamu memulai melakukan proses design. Alternatif yang ngaret coba tawarkan yakni dengan mengubah tampilan view menggunakan gambar, namun hal ini tentu saja perlu disesuaikan dengan data dan kebutuhan.

Chart view

chart view
Gambar oleh: ngaret.com

Jika kamu hanya ingin sekadar menampilkan data tanpa banyak mengharuskan pengguna berinteraski dengan data tersebut (operasi dasar, CRUD). Alternatif lain yang dapat kamu gunakan adalah dengan cara menampilakan data tersebut menggunakan chart. Beberapa library gratis seperti chartjs juga dapat kamu gunakan, library ini tidak hanya memiliki performa yang mumpuni juga memiliki tampilan yang tidak kalah dari library berbayar.

Card view

card view
Gambar oleh: ngaret.com

Ini dia bagian empuknya. Konsep design yang benar tidak hanya melulu soal konsep. Hal ini sudah matang-matang oleh sang empunya konsep. Sebut saja Google dengan Material Design nya atau Window dengan MetroUI nya. Kamu bisa memanfaatkan beberapa framework yang mendukung konsep ini.

Sejauh pantauan ngaret, terdapat beberapa framework css yang mendukung penggunaan konsep ini sebut saja MaterialIO, Material Design Lite, Materialize dan di sisi Metro, kamu bisa menggunakan MetroUI.

Summary
Review Date
Reviewed Item
Tabel overflow? Ini dia cara mengatasinya
Author Rating
51star1star1star1star1star
(Visited 169 times, 1 visits today)
News Reporter
Banyak orang menyebutku sebagai seorang petualang, dan itulah aku --hanya satu hal bedanya: seseorang yang mengorbankan kulit luarnya untuk membuktikan kebenaran di dalamnya. (1965) ~Ernesto "Che" Guevara

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *