'How to add horizontal scroll in paginated Data Table in flutter web

I have used Paginated Data Table in flutter web. On smaller screen, the table adjust it's width but hides the data column, I want to scroll the Data table horizontally, so that I am able to go through the whole data columns, added in the Paginated Data Table. (don't want to use any package)

Thanks in advance

Here is my code

SingleChildScrollView(
      child: Container(
        padding: EdgeInsets.all(10),
        color: AppColors.grey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
               CustomIconButton(
                buttonText: "Add School",
                onTap: () {}
              ),
        
            SizedBox(height: 15),

            PaginatedDataTable(
              source: _schoolData,
              dragStartBehavior: DragStartBehavior.start,

              header: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(20),
                    child: CustomText(
                      text: "School Overview",
                      fontSize: 20,
                    ),
                  ),
                  Divider(height: 0),
                ],
              ),
              columns:  [
                _createDataColumn("ID"),
                _createDataColumn("Name"),
                _createDataColumn("User Name"),
                _createDataColumn("Email"),
                _createDataColumn("City"),
                _createDataColumn("Country"),
                _createDataColumn("Grading"),
                _createDataColumn("Archive"),
                _createDataColumn("Education Level"),
                _createDataColumn(""),
              ],
              columnSpacing: 100,
              horizontalMargin: 10,
              rowsPerPage: 8,
              showCheckboxColumn: false,
              dataRowHeight: 70,
              arrowHeadColor: AppColors.darkBlue,

            ),
          ],
        ),
      ),
    );
flutterdartuser-interfacescroll


Solution 1:[1]

put SingleChildScrollView inside SingleChildScrollView with different scrollDirection for example:

SingleChildScrollView(
            scrollDirection : Axis.vertical
            child: Column(
              children: [
                SingleChildScrollView(
                  scrollDirection : Axis.horizontal,
                  child: Text(''),
                ),
                SingleChildScrollView(
                  scrollDirection : Axis.horizontal,
                  child: Text(''),
                ),
                SingleChildScrollView(
                  scrollDirection : Axis.horizontal,
                  child: Text(''),
                ),
              ],
            ),

          ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ma Jeed

Related Questions