Flutter에서 DataTable 위젯을 사용한 데이터 테이블 구현하기

728x90

Flutter에서 데이터를 테이블 형태로 시각화하고자 할 때 가장 유용한 위젯 중 하나가 DataTable입니다.

이 위젯은 행과 열을 가진 표 형식으로 데이터를 표시할 수 있으며, 소규모 데이터셋을 보여줄 때 깔끔한 UI와 효율적인 정렬 및 정리 기능을 제공합니다.

이 글에서는 DataTable 위젯의 기본 구조, 사용 방법, 그리고 활용 예제에 대해 자세히 알아보겠습니다.

1. DataTable이란?

DataTable은 Flutter에서 데이터 시각화에 사용되는 테이블 위젯입니다. 이를 사용하면 행과 열로 구성된 표 형식으로 데이터를 보여줄 수 있으며, 각 열의 제목과 행의 내용을 지정할 수 있습니다. 또한, 데이터의 양이 많지 않을 때 정렬 기능을 통해 특정 열을 기준으로 데이터를 오름차순 또는 내림차순으로 정리할 수 있어 유용합니다.

DataTable의 주요 기능은 다음과 같습니다:

테이블 형태의 데이터 표시: 데이터를 직관적으로 보여줄 수 있는 표 형태 제공.
열 제목: 각 열에 제목을 부여해 데이터의 의미를 명확하게 전달.
정렬 기능: 데이터를 특정 열 기준으로 오름차순, 내림차순 정렬 가능.
행 선택 기능: 사용자가 데이터를 선택할 수 있는 기능.

2. DataTable의 기본 구조

DataTable은 기본적으로 두 가지 주요 요소로 구성됩니다:

DataColumn: 테이블의 열을 나타내며, 각 열의 제목을 설정합니다.
DataRow: 테이블의 행을 나타내며, 각 행의 셀에 데이터를 넣습니다.

기본적인 DataTable의 예제를 살펴보겠습니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter DataTable Example'),
        ),
        body: DataTableDemo(),
      ),
    );
  }
}

class DataTableDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: DataTable(
        columns: const <DataColumn>[
          DataColumn(
            label: Text(
              'Name',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          DataColumn(
            label: Text(
              'Age',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          DataColumn(
            label: Text(
              'Role',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
        ],
        rows: const <DataRow>[
          DataRow(
            cells: <DataCell>[
              DataCell(Text('John Doe')),
              DataCell(Text('25')),
              DataCell(Text('Developer')),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Text('Jane Smith')),
              DataCell(Text('30')),
              DataCell(Text('Designer')),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Text('Alex Johnson')),
              DataCell(Text('40')),
              DataCell(Text('Manager')),
            ],
          ),
        ],
      ),
    );
  }
}

위 예제에서는 3개의 열(Name, Age, Role)과 3개의 행을 가진 간단한 테이블을 구현했습니다. DataTable의 기본 구성 요소인 DataColumn과 DataRow를 사용해 각각 열과 행을 정의하고, 각 행의 셀에는 DataCell로 데이터를 넣습니다.

3. 주요 속성 및 메서드

DataTable에는 다양한 속성들이 존재하며, 이를 통해 테이블을 더욱 유연하게 만들 수 있습니다.

columns: DataColumn의 리스트로, 테이블의 열을 정의합니다. 각 열에는 제목이나 정렬 가능 여부를 설정할 수 있습니다.
rows: DataRow의 리스트로, 각 행에 들어갈 데이터를 설정합니다.
DataCell: 각 셀에 표시될 데이터를 포함하는 위젯입니다. 셀마다 다른 위젯을 포함할 수 있어, 텍스트 외에도 버튼, 이미지 등을 넣을 수 있습니다.
sortColumnIndex: 정렬 기준이 되는 열의 인덱스를 나타냅니다.
sortAscending: 정렬이 오름차순인지 여부를 나타냅니다.

4. 정렬 기능 추가하기

DataTable에서 데이터를 정렬하는 기능을 추가하려면, DataColumn의 onSort 속성을 사용해야 합니다. 특정 열의 제목을 클릭했을 때 데이터를 오름차순 또는 내림차순으로 정렬하는 예제를 살펴보겠습니다.

class DataTableDemo extends StatefulWidget {
  @override
  _DataTableDemoState createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  bool _sortAscending = true;
  int _sortColumnIndex = 0;
  
  List<Map<String, dynamic>> _data = [
    {'name': 'John Doe', 'age': 25, 'role': 'Developer'},
    {'name': 'Jane Smith', 'age': 30, 'role': 'Designer'},
    {'name': 'Alex Johnson', 'age': 40, 'role': 'Manager'},
  ];

  void _sort<T>(Comparable<T> Function(Map<String, dynamic> d) getField, int columnIndex, bool ascending) {
    setState(() {
      _sortColumnIndex = columnIndex;
      _sortAscending = ascending;
      _data.sort((a, b) {
        if (!ascending) {
          final Map<String, dynamic> c = a;
          a = b;
          b = c;
        }
        return Comparable.compare(getField(a), getField(b));
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: DataTable(
        sortColumnIndex: _sortColumnIndex,
        sortAscending: _sortAscending,
        columns: <DataColumn>[
          DataColumn(
            label: Text('Name'),
            onSort: (int columnIndex, bool ascending) =>
                _sort<String>((d) => d['name'], columnIndex, ascending),
          ),
          DataColumn(
            label: Text('Age'),
            numeric: true,
            onSort: (int columnIndex, bool ascending) =>
                _sort<num>((d) => d['age'], columnIndex, ascending),
          ),
          DataColumn(
            label: Text('Role'),
            onSort: (int columnIndex, bool ascending) =>
                _sort<String>((d) => d['role'], columnIndex, ascending),
          ),
        ],
        rows: _data.map<DataRow>((item) {
          return DataRow(
            cells: <DataCell>[
              DataCell(Text(item['name'])),
              DataCell(Text(item['age'].toString())),
              DataCell(Text(item['role'])),
            ],
          );
        }).toList(),
      ),
    );
  }
}

이 코드는 사용자가 특정 열의 제목을 클릭했을 때, 해당 열의 데이터를 정렬하도록 설정하는 방법을 보여줍니다. sortColumnIndex와 sortAscending 속성을 활용해 정렬 상태를 제어하고, onSort를 통해 데이터를 정렬합니다.

5. DataTable 활용 시 고려 사항

DataTable은 간편하게 데이터를 표 형식으로 시각화할 수 있지만, 대량의 데이터를 처리하는 데는 적합하지 않습니다. 만약 큰 데이터셋을 다뤄야 한다면 PaginatedDataTable을 사용하는 것이 더 효율적일 수 있습니다. 이 위젯은 DataTable과 유사하지만, 페이지 단위로 데이터를 나누어 보여줌으로써 성능을 향상시킬 수 있습니다.

결론

Flutter의 DataTable 위젯은 소규모 데이터를 표 형식으로 시각화하는 데 매우 유용한 도구입니다. 간단한 UI로 데이터를 정리하고, 정렬 기능을 제공하여 사용자가 데이터를 더욱 쉽게 탐색할 수 있도록 도와줍니다. 이번 글에서는 DataTable의 기본 사용법과 주요 기능을 살펴보았으며, 실제 예제를 통해 이를 구현하는 방법을 소개했습니다. 앞으로 DataTable을 활용해 데이터 시각화의 효율성을 높여보세요!