Halo teman Flutter! Pada artikel kali ini saya ingin membahas tentang “Data Table in Flutter”.
Data Table merupakan kumpulan data-data yang divisualisasikan kedalam sebuah table.
- Buat Container untuk menampung besar table data. dan tambahkan SingleScrollView
Container(
width: 550,
height: 540,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffF2F2F2), width: 1)),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal, // ini ditambahkan jika ingin melakukan scroll kesecara horizontal
);2. Panggil DataTable dan panggil column untuk membuat data per kolom seperti codingan berikut ini.
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xffF2F2F2), width: 1)),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
width: 550,
height: 540,
child: DataTable(
columns: const <DataColumn>[],
),
),
),
),3. Isi Data Column seperti dibawah ini.
child: DataTable(
columns: const <DataColumn>[
DataColumn(label: Text("No")),
DataColumn(label: Text("Bulan")),
DataColumn(label: Text("TGL")),
DataColumn(label: Text("Jumlah")),
DataColumn(label: Text("Keterangan")),
],4. Panggil rows untuk membuat baris kesamping.
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xffF2F2F2), width: 1)),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
width: 550,
height: 540,
child: DataTable(
columns: const <DataColumn>[
DataColumn(label: Text("No")),
DataColumn(label: Text("Bulan")),
DataColumn(label: Text("TGL")),
DataColumn(label: Text("Jumlah")),
DataColumn(label: Text("Keterangan")),
],
rows: <DataRow>[],
),
),
),
),5. Terakhir isi data rows seperti berikut ini.
DataRow(cells: <DataCell>[
DataCell(Text("1")),
DataCell(Text("Januari")),
DataCell(Text("01")),
DataCell(Text("Rp150.000")),
DataCell(Text(
"Lunas",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0XFF13A89E)),
)),
]),Berikut adalah hasil Running membuat Data Table di Flutter
Catatan : Column harus sesuai jumlah dengan Rows. Jika Column nya 5, maka input baris juga ada 5, karena jika tidak maka akan terjadi error.
Berikut adalah codingan lengkapnya ya teman-teman :
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xffF2F2F2), width: 1)),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
width: 550,
height: 540,
child: DataTable(
columns: const <DataColumn>[
DataColumn(label: Text("a")),
DataColumn(label: Text("b")),
DataColumn(label: Text("c")),
DataColumn(label: Text("d")),
],
rows: <DataRow>[
DataRow(cells: <DataCell>[
DataCell(Text("1")),
DataCell(Text("2")),
DataCell(Text("3")),
DataCell(Text("4.000")),
]),
DataRow(cells: <DataCell>[
DataCell(Text("1")),
DataCell(Text("2")),
DataCell(Text("3")),
DataCell(Text("4.000")),
]),
],
),
),
),
),