[Flutter]플러터 DataTable 응용하기 RxList를 DataTable에 넣기

 

• API 데이터 바인딩 :
  • codeSearchAPI에서 가져온 데이터를 저장하는 관찰 가능한 목록입니다.
  • 함수 는 및 변수를 initCommon초기화합니다 .
• 동적 데이터 테이블 :
  • 위젯 DataTable의 열과 행은 동적으로 채워집니다.
  • 위젯 은 변경 사항이 있을 때 반응적으로 업데이트를 Obx보장합니다 .
• 수평 스크롤 :
  • SingleChildScrollView데이터가 화면 너비를 초과하는 경우 수평 스크롤이 가능하도록 추가되었습니다 .

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class DataTableExample extends StatelessWidget {
  final RxList<dynamic> codeSearch = [].obs;
  final DynamicProvider dynamicProvider = DynamicProvider();
  final RxList<dynamic> locationGroup = [].obs;

  Future<void> initCommon() async {
    codeSearch.value = await dynamicProvider.getData(
        "SP_DATA_QUERY01");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Data Table Example')),
      body: Obx(() {
        if (codeSearch.isEmpty) {
          return const Center(child: CircularProgressIndicator());
        }

        return SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            columns: [
              DataColumn(label: Text('LOC_CD')), // Replace with your column names
              DataColumn(label: Text('Other Field')), // Replace with other fields
            ],
            rows: codeSearch.map((data) {
              return DataRow(cells: [
                DataCell(Text(data['LOC_CD'].toString())), // Adjust as needed
                DataCell(Text(data['OtherField'].toString())), // Replace with actual field name
              ]);
            }).toList(),
          ),
        );
      }),
    );
  }
}