Enabling scrolling in datatable

[rodriigovieira]

Describe the feature

It would be nice to be able to pass a prop to Datatable choosing whether it should be scrollable or not. Something such as scrollable.

If it is currently possible, I'm sorry, I looked for it but I didn't find it.

[tiendn]

I think you can customized your own code with a ScrollView wrap here.

import * as React from 'react';
import { DataTable } from 'react-native-paper';

export default class MyComponent extends React.Component {
render() {
    return (
      <DataTable>
        <DataTable.Header>
          <DataTable.Title>Dessert</DataTable.Title>
          <DataTable.Title numeric>Calories</DataTable.Title>
          <DataTable.Title numeric>Fat</DataTable.Title>
        </DataTable.Header>

        <ScrollView> /* Add here */
          <DataTable.Row>
            <DataTable.Cell>Frozen yogurt</DataTable.Cell>
            <DataTable.Cell numeric>159</DataTable.Cell>
            <DataTable.Cell numeric>6.0</DataTable.Cell>
          </DataTable.Row>
          <DataTable.Row>
            <DataTable.Cell>Ice cream sandwich</DataTable.Cell>
            <DataTable.Cell numeric>237</DataTable.Cell>
            <DataTable.Cell numeric>8.0</DataTable.Cell>
          </DataTable.Row>
        </ScrollView>

        <DataTable.Pagination
          page={1}
          numberOfPages={3}
          onPageChange={(page) => { console.log(page); }}
          label="1-2 of 6"
        />
      </DataTable>
    );
  }
}

[rodriigovieira]

That's correct, it indeed works. The line became scrollable.

What I am trying to make, though, is for the table to work in smaller screens, by not displaying the three dots (...).

When I wrap the Datatable.Row in a ScrollView with the horizontal property, all elements get together, without any spacing between them. I tried to style it in several different ways, but I wasn't able to make it work so far.

Also, it'll probably be necessary to wrap the Datatable.Header in a ScrollView as well, so it can have the same width as it's children.

It would be nice if there were an out-of-the-box feature that could do this.

[tiendn]

You meant, horizontal scroll?

I want this feature too 👍

[henokmengistu]

we all love to have this feature, thanks for asking. As a quick fix though I was thinking like putting the data table in scroll view for the smaller width situations and enclosing them with a view with a static width, which we can get by multiplying a static width with the number of columns.

[acro5piano]

I also want this feature for use in web.

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[rodriigovieira]

I believe this issue is pertinent.

[joshxyzhimself]

Alternative without using the DataTable

<ScrollView horizontal>
  <View>
    <Text style={styles.rowTitle}>Column Head</Text>
    <Text style={styles.rowContent}>Row Item</Text>
  </View>
  <View>
    <Text style={styles.rowTitle}>Column Head</Text>
    <Text style={styles.rowContent}>Row Item</Text>
  </View>
  <View>
    <Text style={styles.rowTitle}>Column Head</Text>
    <Text style={styles.rowContent}>Row Item</Text>
  </View>
  <View>
    <Text style={styles.rowTitle}>Column Head</Text>
    <Text style={styles.rowContent}>Row Item</Text>
  </View>
</ScrollView>

Thanks to @HenokMengistu for idea lol

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[prajna-h]

Hello, I did not find any solution to this issue.. Horizontal scroll bar is required because when customize the width of columns, it appears as ... for the rest of the columns

[rodriigovieira]

What an annoying bot.

Even though there's no activity, I believe this wasn't implemented yet, so it's still a valid suggestion.

[Saidfatah]

What an annoying bot.

Even though there's no activity, I believe this wasn't implemented yet, so it's still a valid suggestion.

yeah and I also wonder as how didn't they implement this already like its such an obvious necessity right ?

[fridavbg]

Any updates on this?

[Chandra-Panta-Chhetri]

Any update on this? I am also stuck at this part

That's correct, it indeed works. The line became scrollable.

What I am trying to make, though, is for the table to work in smaller screens, by not displaying the three dots (...).

When I wrap the Datatable.Row in a ScrollView with the horizontal property, all elements get together, without any spacing between them. I tried to style it in several different ways, but I wasn't able to make it work so far.

Also, it'll probably be necessary to wrap the Datatable.Header in a ScrollView as well, so it can have the same width as it's children.

It would be nice if there were an out-of-the-box feature that could do this.

[ethansoup]

This is needed desperately

[AlexLionne]

I succeeded doing something like this :

<DataTable>
  <ScrollView horizontal contentContainerStyle={{ flexDirection: 'column' }}>

    <DataTable.Header>
    {[0,0,0].map(column => <DataTable.Title style={{ width: 100 }}>column</DataTable.Title>)}
    </DataTable.Header>

    <DataTable.Row style={{ flex: 1, width: '100%', height: 50 }}>
      {[0,0,0].map(cell => <DataTable.Cell style={{ width: 100 }}>cell</DataTable.Cell>)}
    </DataTable.Row>

  </ScrollView>
</DataTable>