1

I am trying to left-align cell values in my FixedDataTable implementation. Below is the code I am using:

require('./app.css');
require('fixed-data-table/dist/fixed-data-table.min.css');
const     $ = require('jquery');
const React = require('react');

import {Table, Column, Cell} from 'fixed-data-table';



const App = React.createClass({
    render: function() {
        return (
                <Table
                    height       = {200}   width     = {200}
                    rowsCount    = { 10}   rowHeight = { 26}
                    headerHeight = {100}>
                    <Column
                        width={100}
                        cell={props=>(<Cell className='align-right'>{props.rowIndex}</Cell>)}
                        align='left'
                        header="Right-aligned values"/>
                    <Column
                        width={100}
                        cell={props=>(<Cell className='align-left'>{2*props.rowIndex}</Cell>)}
                        align='left'
                        header="Left-aligned values"/>
                </Table>
        );
    }
});

export default App;

And the css file I require is simply:

.align-right {
    align: right;
    text-align: right;
    font-weight: bold;
}

.align-left {
    align: left;
    text-align: left;
    font-style: italic;
}

What I get is the following:

enter image description here

... which demonstrates that the styles are indeed applied, except for the alignment part.

Inspecting the various elements (of type div mostly) that FixedDataTable creates in the DOM it appears that my class is assigned at a level too deep to matter (the enclosing div is already left-aligned).

Marcus Junius Brutus
  • 26,087
  • 41
  • 189
  • 331
  • You want to right align the left column? If that's the case, why is `align='left'` for both the `Column`s. – Yuya Jun 07 '16 at 12:55
  • Same as @Kujira, you set it to align='left' – Michael Rasoahaingo Jun 07 '16 at 13:46
  • @Kujira you are referring to the `align` attribute of the `Column` - this is just the alignment of the *header*, not of the cells. Even if I set it to 'right', sure enough the *header* is aligned right but the cells remain aligned left. – Marcus Junius Brutus Jun 07 '16 at 13:52
  • @MarcusJuniusBrutus I haven't played around with it, but according to the docs, [align: The horizontal alignment of the table cell content](https://facebook.github.io/fixed-data-table/api-column.html). – Yuya Jun 07 '16 at 13:59

0 Answers0