[flutter] DataTable에서 데이터 필터링하는 방법

18 Dec 2023

flutter

Flutter에서 DataTable은 테이블 형식의 데이터를 표시하는 데 사용됩니다. 때때로 사용자는 테이블의 데이터를 필터링하고 싶을 수 있습니다. 이를 위해 Flutter 앱에서 DataTable을 사용하는 방법에 대해 알아보겠습니다.

1. DataTable 위젯 생성

먼저, 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('Data Table Filtering Example'),
        ),
        body: MyDataTable(),
      ),
    );
  }
}

class MyDataTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: const <DataColumn>[
        DataColumn(label: Text('ID')),
        DataColumn(label: Text('Name')),
        DataColumn(label: Text('Age')),
      ],
      rows: const <DataRow>[
        DataRow(cells: <DataCell>[
          DataCell(Text('1')),
          DataCell(Text('John')),
          DataCell(Text('25')),
        ]),
        DataRow(cells: <DataCell>[
          DataCell(Text('2')),
          DataCell(Text('Bob')),
          DataCell(Text('30')),
        ]),
        // Add more rows as needed
      ],
    );
  }
}

위의 코드는 간단한 DataTable을 생성합니다. 이제 테이블을 필터링할 기능을 추가해 보겠습니다.

2. 데이터 필터링 추가

DataTable에서 데이터를 필터링하기 위해서는 사용자 입력을 허용하고 결과를 바탕으로 표를 업데이트해야 합니다. 이 예제에서는 TextField를 사용하여 이름 필터링을 구현해 보겠습니다.

class MyDataTable extends StatefulWidget {
  @override
  _MyDataTableState createState() => _MyDataTableState();
}

class _MyDataTableState extends State<MyDataTable> {
  TextEditingController _nameFilterController = TextEditingController();
  String _nameFilter = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          controller: _nameFilterController,
          decoration: InputDecoration(
            labelText: 'Filter by Name',
          ),
          onChanged: (value) {
            setState(() {
              _nameFilter = value;
            });
          },
        ),
        Expanded(
          child: SingleChildScrollView(
            child: DataTable(
              columns: const <DataColumn>[
                DataColumn(label: Text('ID')),
                DataColumn(label: Text('Name')),
                DataColumn(label: Text('Age')),
              ],
              rows: <DataRow>[
                DataRow(cells: <DataCell>[
                  DataCell(Text('1')),
                  DataCell(Text('John')),
                  DataCell(Text('25')),
                ]),
                DataRow(cells: <DataCell>[
                  DataCell(Text('2')),
                  DataCell(Text('Bob')),
                  DataCell(Text('30')),
                ]),
                // Add more rows as needed
              ].where((DataRow row) => _nameFilter.isEmpty || row.cells[1].child.toString().contains(_nameFilter)).toList(),
            ),
          ),
        ),
      ],
    );
  }
}

위의 코드는 DataTable에 TextField를 추가하여 이름으로 필터링하는 방법을 보여줍니다. 입력된 이름과 일치하는 행만 보이도록 rows를 필터링하고 있습니다.

위의 코드를 사용하면 사용자는 이름으로 데이터를 필터링할 수 있게 됩니다.

이제 DataTable에서 데이터 필터링하는 방법에 대해 알아보았습니다. DataTable을 필터링하는 데 필요한 추가 기능은 사용자의 요구에 따라 조정하여 적용할 수 있습니다.

참고 문헌: