CODEWITHSUNDEEP
reactjsreact-table
user2965514
user2965514

Reputation: 123

How do I right justify data in react-table columns?

I have these columns defined in a bit of Node code to create columns in a react table:

const columns = [{
    Header: 'Regiom',
    accessor: 'region' // String-based value accessors!
  }, {
    Header: 'Division',
    accessor: 'division'
  }, {
    Header: 'File Client Id',
    accessor: 'facilityid'
  }, {
    Header: 'Meter #',
    accessor: 'meternumber'
  }, {
    Header: 'Service Address',
    accessor: 'serviceaddress'
  }, {
    Header: 'Service City',
    accessor: 'servicecity'
  }, {
    Header: 'Service Zip',
    accessor: 'servicezip'
  }, {
    Header: 'Account Number',
    accessor: 'accountnumber'
  }, {
    Header: 'Utility Provider',
    accessor: 'utilityprovider'
  }, {
    Header: 'Interval Start',
    accessor: 'intervalstart'
  }, {
    Header: 'Interval End',
    accessor: 'intervalend'
  }, {
    Header: 'kWh Usage',
    accessor: 'kwh_usage'
  }, {
    Header: 'kW Demand',
    accessor: 'kw_demand'
  }, {
    Header: 'Gas Unit of Measure',
    accessor: 'gas_uom'
  }, {
    Header: 'Gas Usage Amount',
    accessor: 'gas_usage_amount'
  }];

All I really want to do is leave the column headers centered but right justify the numbers - like, for example, the kWh Usage column. How do I do that? Is there a way to apply a style to a column within this? I tried the style: {text-align: right} and the code throws syntax errors...

Upvotes: 1

Views: 9073

Answers (3)

Hadi
Hadi

Reputation: 106

add an attribute center: true, so your code will be something like:

{
    Header: 'Age',
    accessor: 'age',
    center: true,
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  },

You can also add right:true to align your column's content to right

Upvotes: 0

user11910739
user11910739

Reputation:

You can do it via adding custom component in Header or Cell.

const columns = [
  {
    Header: () => <div style={{ textAlign: "right" }}>Regiom</div>,
    accessor: "region",
    Cell: row => <div style={{ textAlign: "right" }}>{row.value}</div>
  },
  ...
  ...

Here is the sample code for you.
https://codesandbox.io/s/react-table-simple-table-eep26

Hope this will work for you!

Upvotes: 4

Mike Waldrup
Mike Waldrup

Reputation: 757

Solution here: https://www.npmjs.com/package/react-table#example

{
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  },

This link may be helpful to you: https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

Upvotes: 2

Related Questions