How to Make a Horizontally Scrollable Cell in a Datatable

How to make a horizontally scrollable cell in a datatable

This is only possible when the text is enclosed in a block-level HTML element with a definied width and text-wrapping disabled and the element in question has the CSS property overflow:scroll or at least overflow-x:scroll definied.

So, in plain HTML terms, that would basically be the following approach:

<div style="width: 200px; white-space: nowrap; overflow-x: scroll;">
    Some really really lengthy book title about a really really lengthy book.
</div>

In PrimeFaces <p:column> terms, that would be:

<p:column styleClass="scrollableCell">
    #{book.title}
</p:column>

with

.ui-datatable td.scrollableCell div.ui-dt-c {
    width: 200px;
    white-space: nowrap;
    overflow-x: scroll;
}

Note that you don't need to bring in any div, the <p:column> already does that.

Datatables - horizontal scrolling for only certain columns

You could achieve this by changing the relative position of each cell based on the scrollLeft value.

$('.dataTables_scrollBody').scroll(function (){
    var cols = 2 // how many columns should be fixed
    var container = $(this)
    var offset = container.scrollLeft()
    container.add(container.prev()).find('tr').each(function (index,row){ // .add(container.prev()) to include the header
        $(row).find('td, th').each(function (index,cell){
            if(index>=cols) return
            $(cell).css({position:'relative',left:offset+'px'})
        })
    })
})

How to create a horizontally scrolling table with fixed column in Flutter?

Here is a quick example and this would be the result: Video

List<Widget> _buildCells(int count) {
  return List.generate(
    count,
    (index) => Container(
      alignment: Alignment.center,
      width: 120.0,
      height: 60.0,
      color: Colors.white,
      margin: EdgeInsets.all(4.0),
      child: Text("${index + 1}", style: Theme.of(context).textTheme.title),
    ),
  );
}

List<Widget> _buildRows(int count) {
  return List.generate(
    count,
    (index) => Row(
      children: _buildCells(10),
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: _buildCells(20),
          ),
          Flexible(
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: _buildRows(20),
              ),
            ),
          )
        ],
      ),
    ),
  );
}

how to add scrollbar in horizontal in datatable react native paper?

To enable horizontal scrolling, you can put the content you want to scroll in a ScrollView component with horizontal as a prop like this:

<ScrollView horizontal>
<DataTable style={styles.table} >
                <DataTable.Header>
                    <DataTable.Title style={styles.header} > <Text style={styles.tableHeading}>Id</Text></DataTable.Title>
                    <DataTable.Title style={styles.header} > <Text style={styles.tableHeading} >Username</Text></DataTable.Title>
                    <DataTable.Title style={styles.header} >  <Text style={styles.tableHeading} >Email</Text></DataTable.Title>
                </DataTable.Header>
                <DataTable.Row>
                    <DataTable.Cell>1.</DataTable.Cell>
                    <DataTable.Cell>adiljaz02</DataTable.Cell>
                    <DataTable.Cell>adilijaz.02@gmail.com</DataTable.Cell>
                </DataTable.Row>
                <DataTable.Row>
                    <DataTable.Cell>2.</DataTable.Cell>
                    <DataTable.Cell>adil09</DataTable.Cell>
                    <DataTable.Cell>adili09@gmail.com</DataTable.Cell>
                </DataTable.Row>
                <DataTable.Pagination
                    page={1}
                    numberOfPages={3}
                    onPageChange={(page) => { console.log(page); }}
                    label="1-2 of 6"
                />
            </DataTable>
</ScrollView>

DataTable that expands to window with, and also scroll horizontally if it overflows

I was able to fix this issue by using a constrained box around my table and setting the minimum width to the available width on the screen. This still allows the table to expand horizontally while keeping the width at least as large as the available screen width.

How to Make a Horizontally Scrollable Cell in a Datatable