CODEWITHSUNDEEP
react-nativereact-native-table-component
Carl Bruiners
Carl Bruiners

Reputation: 546

React Native Table Component

I'm using React Native Table Component, using their example below. I'd like to align the text of one column to the left and the others the center. The problem appears to be that I can only set this universally across all columns instead of individually.

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component';
 
export default class ExampleTwo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['', 'Head1', 'Head2', 'Head3'],
      tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
      tableData: [
        ['1', '2', '3'],
        ['a', 'b', 'c'],
        ['1', '2', '3'],
        ['a', 'b', 'c']
      ]
    }
  }
 
  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 1}}>
          <Row data={state.tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.text}/>
          <TableWrapper style={styles.wrapper}>
            <Col data={state.tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
            <Rows data={state.tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.text}/>
          </TableWrapper>
        </Table>
      </View>
    )
  }
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  head: {  height: 40,  backgroundColor: '#f1f8ff'  },
  wrapper: { flexDirection: 'row' },
  title: { flex: 1, backgroundColor: '#f6f8fa' },
  row: {  height: 28  },
  text: { textAlign: 'center' }
});

Upvotes: 0

Views: 3020

Answers (1)

Wodin
Wodin

Reputation: 3538

I suppose you could do something like this:

function leftAlign(value) {
  return (
    <Text style={{alignSelf: "flex-start"}}>{value}</Text>
  );
}

export default class ExampleTwo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['', 'Head1', 'Head2', 'Head3'],
      tableTitle: ['Title', 'Title2', 'Title3', 'Title4'],
      tableData: [
        [leftAlign('1'), '2', '3'],
        [leftAlign('a'), 'b', 'c'],
        [leftAlign('1'), '2', '3'],
        [leftAlign('a'), 'b', 'c'],
      ],
    };
  }
[...]

Upvotes: 1

Related Questions