Background:
I am currently working on a sticky data table, currently I have two DataTable widget in a Row as shown by the code below.

                    ...Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // produce left rows
                        if (fixedLeftColumns > 0)
                          Container(
                            decoration: BoxDecoration(
                                color: Styles.defaultLightWhiteColor,
                                boxShadow: [Styles.defaultBoxShadow]),
                            child: DataTable(
                              showCheckboxColumn: false,
                              dividerThickness: 0.5,
                              columns: leftFixedHeaders
                                  .map((e) => DataColumn(
                                        onSort: e.onSort,
                                        tooltip:
                                            e.onSort == null ? null : e.label,
                                        label: Container(
                                            alignment: Alignment.centerLeft,
                                            height: rowHeight,
                                            width: e.width - 10,
                                            child: CustomText(text: e.label)),
                                      ))
                                  .toList(),
                              rows: [...leftFixedRows.map((e) => e)],
                            ),
                          ),
                        // produce table rows
                        Expanded(
                            child: SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          controller: dataScrollController,
                          child: DataTable(
                            showCheckboxColumn: false,
                            dividerThickness: 0.5,
                            columns: centerFixedHeaders
                                .map((e) => DataColumn(
                                      onSort: e.onSort,
                                      tooltip:
                                          e.onSort == null ? null : e.label,
                                      label: Container(
                                          alignment: Alignment.centerLeft,
                                          height: rowHeight,
                                          width: e.width,
                                          child: CustomText(text: e.label)),
                                    ))
                                .toList(),
                            rows: [...centerFixedRows.map((e) => e)],
                          ),
                        )),
                      ],
                    ),
                  )

The sticky data table works quite well here, however I encountered a problem with this setup. When I hover into a row of the sticky table, it only highlights the row of the sticky table, however, I would like for the center table also to be highlighted on hovered or pressed.

Currently (cursor hovering the sticky table):

Expectations:

Is there any way to link both table rows to update simultaneously by hovering one? Or are there any other alternatives to produce this result?