flutter datatable how to add vertical border between columns

Question

I have a data table like below with three columns and I want to add vertical border separator , divider or whatever it called between all columns-included header- is this available in flutter datatables and how to do this ? thanks as a side note : I tried multiple options but it is hard to minuplate like listview or json_table package

 import 'package:flutter/material.dart';
    import 'dart:math';
    
    import 'package:talab/helpers/constant_helper.dart';
    
    
    class TablesPage extends StatefulWidget {
      @override
      TablesPageState createState() => TablesPageState();
    }
    
    class TablesPageState extends State {
      // Generate a list of fiction prodcts
      final List _products = List.generate(30, (i) {
        return {"id": i, "name": "Product $i", "price": Random().nextInt(200) + 1};
      });
    
      int _currentSortColumn = 0;
      bool _isAscending = true;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('Kindacode.com'),
            ),
            body: Container(
              width: double.infinity,
              child: SingleChildScrollView(
                child: DataTable(
                  dividerThickness: 5,
                  decoration: BoxDecoration(
                      border:Border(
                          right: Divider.createBorderSide(context, width: 5.0),
                          left: Divider.createBorderSide(context, width: 5.0)
                      ),
                      color: AppColors.secondaryColor,
                  ),
                  showBottomBorder: true,
                  sortColumnIndex: _currentSortColumn,
                  sortAscending: _isAscending,
                  headingRowColor: MaterialStateProperty.all(Colors.amber[200]),
                  columns: [
                    DataColumn(label: Text('كود الطلب')
                    ),
                    DataColumn(label: Text('الاشعار')),
                    DataColumn(
                        label: Text(
                          'التاريخ',
                          style: TextStyle(
                              color: Colors.blue, fontWeight: FontWeight.bold),
                        ),),
                  ],
                  rows: _products.map((item) {
                    return DataRow(cells: [
                      DataCell(Text(item['id'].toString())),
                      DataCell(Text(item['name'])),
                      DataCell(Text(item['price'].toString()))
                    ]);
                  }).toList(),
                ),
              ),
            ));
      }
    }

user_11286934 · Answer

As others have suggested, adding a vertical divider is one solution. Another is to use the DataTable's built-in border, which adds a border to every cell. It works like Border in the Decoration class. So, using your code example, the table can be defined:

    DataTable(
        border: TableBorder.all(
            width: 5.0,
            color:AppColors.secondaryColor,
            dividerThickness: 5,

You can remove all of the other borders in your code. I believe this will give you the look you want.

user_11908010 · Answer

As variant, you can use VerticalDivider widget. For example, define props of your vertical divider

  Widget _verticalDivider = const VerticalDivider(
      color: Colors.black,
      thickness: 1,
  );

and add it between header columns and cells

              columns: [
                DataColumn(label: Text('كود الطلب')),
                DataColumn(label: _verticalDivider),
                DataColumn(label: Text('الاشعار')),
                DataColumn(label: _verticalDivider),
                DataColumn(
                    label: Text(
                      'التاريخ',
                      style: TextStyle(
                          color: Colors.blue, fontWeight: FontWeight.bold),
                    ),),
              ],
              rows: _products.map((item) {
                return DataRow(cells: [
                  DataCell(Text(item['id'].toString())),
                  DataCell(_verticalDivider),
                  DataCell(Text(item['name'])),
                  DataCell(_verticalDivider),
                  DataCell(Text(item['price'].toString()))
                ]);
              }).toList(),

user_14566292 · Answer

The following works for me:

          DataTable(
        showBottomBorder: true,
        dividerThickness: 5.0,

        columns: const [
          DataColumn(
            label: Text(
              'Name',
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
          ),
          DataColumn(
            label: Text(''),
          ),
          DataColumn(
            label: Text(
              'Age',
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
          ),
          DataColumn(
            label: Text(''),
          ),
          DataColumn(
            label: Text(
              'Role',
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
          ),
        ],
        rows: const [
          DataRow(
            cells: [
              DataCell(Text('Albert')),
              DataCell(VerticalDivider()),
              DataCell(Text('19')),
              DataCell(VerticalDivider()),
              DataCell(Text('Student')),
            ],
          ),
          DataRow(
            cells: [
              DataCell(Text('Janine')),
              DataCell(VerticalDivider()),
              DataCell(Text('43')),
              DataCell(VerticalDivider()),
              DataCell(Text('Professor')),
            ],
          ),
          DataRow(
            cells: [
              DataCell(Text('William')),
              DataCell(VerticalDivider()),
              DataCell(Text('27')),
              DataCell(VerticalDivider()),
              DataCell(Text('Associate Professor')),
            ],
          ),
        ],
      )

flutter datatable how to add vertical border between columns

3 Answers