[flutter] DataTable에서 행 및 열을 숨기거나 표시하는 방법

18 Dec 2023

flutter

Flutter 앱을 개발하면서 데이터를 효과적으로 표시하고 조작해야 하는 경우가 많습니다. 데이터를 표 형식으로 표시해야 하는 경우, DataTable 위젯을 사용할 수 있습니다. 그런데 때때로 사용자의 요구에 따라 특정 행이나 열을 숨기거나 표시해야 할 수 있습니다. 이를 위해 DataTable에서 행과 열을 숨기거나 표시하는 방법에 대해 알아보겠습니다.

1. 행 숨기기

DataTable에서 특정 행을 숨기려면 DataColumn과 DataRow의 조합을 적절히 활용해야 합니다. 데이터를 관리하는데 도움을 주는 데이터소스가 필요합니다. 데이터소스의 엘리먼트 별로 어떤 행을 표시할지를 결정할 수 있게 해줍니다. 이렇게 하면 특정 조건에 따라 특정 행을 숨기거나 표시할 수 있습니다.

// 데이터소스 정의
final List<Map<String, String>> _dataList = [
  {'id': '1', 'name': 'John', 'age': '25'},
  {'id': '2', 'name': 'Amy', 'age': '30'},
  {'id': '3', 'name': 'Bob', 'age': '22'},
];

// 테이블 생성
DataTable(
  columns: [
    // 컬럼 정의
    DataColumn(label: Text('ID')),
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Age')),
  ],
  rows: _dataList.map((data) {
    // 데이터로부터 DataRow 생성
    return DataRow(
      cells: [
        DataCell(Text(data['id'])),
        DataCell(Text(data['name'])),
        DataCell(Text(data['age'])),
      ],
    );
  }).toList(),
)

코드에서 _dataList는 데이터소스에 해당하며, rows의 map 함수를 통해 DataRow를 생성하고 있습니다. 이를 통해 특정 행을 숨기거나 표시할 때 map 함수를 사용하여 데이터소스에서 필요한 데이터만을 가지고 올 수 있습니다.

2. 열 숨기기

열을 숨기기 위해서는 DataColumn을 통해 각 컬럼을 정의하는 부분에 numeric 및 tooltip 속성을 활용할 수 있습니다. 예를 들어, numeric을 true로 설정하면 해당 열의 내용이 숫자로 인식되어 우측 정렬이 되며, tooltip을 통해 해당 열에 대한 추가 정보를 제공할 수 있습니다.

DataTable(
  columns: [
    DataColumn(
      label: Text('ID'),
      numeric: true,
      tooltip: 'User ID',
    ),
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Age')),
  ],
  rows: _dataList.map((data) {
    return DataRow(
      cells: [
        DataCell(Text(data['id'])),
        DataCell(Text(data['name'])),
        DataCell(Text(data['age'])),
      ],
    );
  }).toList(),
)

위의 코드에서는 numeric과 tooltip 속성을 사용하여 ID 열에 대한 추가 정보를 제공하고 있습니다.

효율적인 데이터 표시 및 관리를 위해 DataTable의 행과 열을 숨기거나 표시하는 방법에 대해 알아보았습니다. 사용자가 필요한 데이터에 집중할 수 있도록 이러한 방법을 유용하게 활용할 수 있습니다.

참고 자료:

Flutter DataTable Class