how to change the background color of column using PaginatedDataTable

Question

i created a table using PaginatedDataTable, but now i want to add the background color of column. here is the code

class _PaginationDataTableState extends State<PaginationDataTable> {

  var dts=DTS();
  int rowPerPage=PaginatedDataTable.defaultRowsPerPage;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink,
      body: SafeArea(
        child: SingleChildScrollView(
          child: PaginatedDataTable(
            arrowHeadColor: Colors.red,
            header: Text("Counter data"),
            columns: [
              DataColumn(label: Text("Col 1")),
              DataColumn(label: Text("Col 2")),
              DataColumn(label: Text("Col 3")),
              DataColumn(label: Text("Col 4")),
            ],
            source:dts,
            onRowsPerPageChanged: (r){
              setState(() {
                rowPerPage=r!;
              });
            },
            rowsPerPage:rowPerPage
        
          ),
        ),
      ),
      
    );
  }
}

class DTS extends DataTableSource{

  DataRow getRow(int index){
    return DataRow.byIndex(index:index,cells: [
      DataCell(Text("#cell1$index")),
      DataCell(Text("#cell2$index")),
      DataCell(Text("#cell3$index")),
      DataCell(Text("#cell4$index"))
    ]);
  }

  @override
  // TODO: implement isRowCountApproximate
  bool get isRowCountApproximate => true;

  @override
  // TODO: implement rowCount
  int get rowCount =>100;

  @override
  // TODO: implement selectedRowCount
  int get selectedRowCount => 0;

}

output:

please help if anyone know how to do this.

Answer 1

Try below code hope its helpful to you

If you change your whole table background color so try this

 Theme(
            data: Theme.of(context).copyWith(
              cardColor: Colors.blue[100],
              dividerColor: Colors.white,
            ),
            child: PaginatedDataTable(),
          ),

Your result screen->

Answer 2

Building on the accepted answer, you can customise the otherwise inaccessible properties of the PaginatedDataTable using the Theme wrapper.

e.g.

    return Theme(
      data: Theme.of(context).copyWith(
        cardTheme: CardTheme(
          elevation: 0, // remove shadow
          margin: const EdgeInsets.all(0), // reset margin
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16), // Change radius
          ),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: PaginatedDataTable(          
          // ...
        ),
      ),
    );