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]

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]

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.