Posts

Membuat Data Table

Bismillahirahmanirrahim,

Hai Sahabat uda coding jumpa lagi dengan artikel terbaru dari kami, pada kesempatan ini kita akan membahas tutorial menggunakan widget data table, data table adalah sebuah widget tabel yang secara otomatis bisa kita pilih semua kolom atau kita bisa menentukan setiap baris atau sel-sel sesuai dengan keinginan kita.

langsung saja kita bahas untuk materinya, seperti biasa pada halaman main.dart, import package material.dart dan arahkan halaman pada home ke class TableData

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: TableData(),
  debugShowCheckedModeBanner: false,
));

Kemudian kita akan membuat class TableData dengan Statefulwidget dimana sifat widget stateful ini dinamis dan dapat diperbaharui datanya sesuai dengan kebutuhan.

class ItemInfo{
  String itemName,itemPrice;
  ItemInfo({this.itemName, this.itemPrice});
}

pertama kita akan membuat class ItemInfo di dalam class ini kita akan mendeklarsikan String itemName dan itemPrice dan di generate dengan constructur.

var items = <ItemInfo>[
  ItemInfo(itemName: "Beras", itemPrice: "\Rp.62000"),
  ItemInfo(itemName: "Gula", itemPrice: "\Rp.12000"),
  ItemInfo(itemName: "Kopi", itemPrice: "\$10000"),
  ItemInfo(itemName: "Teh", itemPrice: "\$8000"),
];

berikutnya kita buat variable items dimana kita akan inisialisai class ItemInfo dengan itemName dan itemPrice, isinya sesuai dengan informasi diatas

class TableData extends StatefulWidget {
  @override
  _TableDataState createState() => _TableDataState();
}

class _TableDataState extends State<TableData> {

  List<ItemInfo> selectedItems = new List<ItemInfo>();
kemudian kita buat new List untuk data pesannya dari class ItemInfo

  void onSelectedRow(bool selected, ItemInfo itemRow) {
    setState(() {
      if(selected) selectedItems.add(itemRow);
      else
        selectedItems.remove(itemRow);
    });
  }

selanjutnya kita akan buat method onSelectedRow di mana memiliki nilai boolean selected, dan nilai ItemInfo dengan itemRow, selanjutnya kita kasih nilai setState, jika di select itemRow maka akan menambah checklist dan jika di unchecklist itemRow akan hilang.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Data Table'),
      ),

      body: Container(
       child: DataTable(
        sortAscending: true,
        columns: <DataColumn>[
          DataColumn(label: Text("Name")),
          DataColumn(label: Text("Price")),
        ],

pada body Container kita menggunakan DataTable dengan properti column dan rows, dimana DataColumn dimana kita menggunakan label Name & Price

rows: items.map((itemRow) => DataRow(
          selected: selectedItems.contains(itemRow),
          onSelectChanged: (bool selected) {
            onSelectedRow(selected,itemRow);
            print(selectedItems.length);
          },

          cells: [
            DataCell(Text(itemRow.itemName),
            showEditIcon: false,
              placeholder: false,
              ),

            DataCell(Text(itemRow.itemPrice),
                showEditIcon: true,
                placeholder: false,
                ),
          ]
        )).toList(),
),),
    );
  }
}

pada rows disini kita menggunakan DataRow dimana propertinya DataCell dengan memanggil itemRow. Dimana ada String itemName dan itemPrice untuk menampilkan data pada variable items.

Kalau sudah selesai semua kita tinggal running emulatornya,

Berikut demo tutorialnya dari Data Table

Demikian tutorial Data table semoga informasi yang disampaikan bermanfaat untuk pembaca blog udacoding, sampai ketemu lagi di next tutorial.

1 Comment :

Leave a Reply :

* Your email address will not be published.