Styling about react-bootstrap-table HOT 26 CLOSED

Hi @mfirry, you mean the td in header or body or both?

from react-bootstrap-table.

I need it for the body right now. Thanks!

from react-bootstrap-table.

Hi @mfirry you can use the "cell format" for your purpose

from react-bootstrap-table.

You're right! Completely missed that. Sorry! Thank you so much!

from react-bootstrap-table.

Sorry, maybe there are some misunderstanding. Cause of the "cell format" use the custom format and wrap that with td, So cell format can't apply the style on td, just only on the inner element that you provide.

from react-bootstrap-table.

Yep, you're right. But luckily that was good enough for me. The ability to actually style the td would be an enhancement, I agree.

from react-bootstrap-table.

Great!, in the future, I'll add the ability for styling td. Thanks for your suggestion.

from react-bootstrap-table.

Hi @AllenFang how can I remove the inline style width in the table header for responsive and display the sorting icons (caret) by default?

<div class="table-header" data-reactid=".0.0.1.1.1.2.$0.0.1.0">
<table class="table table-hover table-bordered" data-reactid=".0.0.1.1.1.2.$0.0.1.0.0" style="width: 1842px;"></table>
</div>

I also try to use 'sortName' and 'sortOrder' but its not working. I currently using "react-bootstrap-table": "^0.9.10"

Thanks for help.

from react-bootstrap-table.

Hi @markmus , I open two issues for your problem, plz reference :)

about removing header width, cause of react-bootstrap-table will set a fix width by browser width after rendering, I'll try to remove this function for fixing your problem. But maybe it does not work.

another, could you give me the default sorting sample code? because I think there's no any problem.

Thanks:)

from react-bootstrap-table.

@AllenFang

Here is my code

Variables

    let listOperator = {
      "operators": [
        {
          "creator": "TEST_USER",
          "created": "2015-08-14T05:37:35",
          "modifier": "TEST_USER",
          "name": "dbm",
          "modified": "2015-08-14T05:37:35",
          "links": [
            {
              "method": "GET",
              "rel": "self",
              "href": "http://localhost:8080/api/operators/55da7bd03411511f7a0a6351"
            }
          ]
        },
        {
          "creator": "TEST_USER",
          "created": "2015-08-27T07:21:13",
          "modifier": "TEST_USER",
          "name": "ABCDEFG",
          "modified": "2015-08-27T07:21:13",
          "links": [
            {
              "method": "GET",
              "rel": "self",
              "href": "http://localhost:8080/api/operators/55deba6940faef1b3adf3203"
            }
          ]
        }
      ]
    }

Table

<BootstrapTable data={listOperator.operators} sortName={ 'name' } sortOrder={ 'asc' } striped={ true } bordered={ true } condensed={ true } hover={ true } styles={ tableStyle }>
    <TableHeaderColumn dataField="name" dataAlign="center" isKey={ true }  dataSort={true}> Operator </TableHeaderColumn>
    <TableHeaderColumn dataField="creator" dataAlign="center" dataSort={true}> Group/Owner </TableHeaderColumn>
    <TableHeaderColumn dataField="created" dataFormat={ this.dateFormatter } dataAlign="center" dataSort={true}> Date Added </TableHeaderColumn>
    <TableHeaderColumn dataField="modified" dataFormat={ this.dateFormatter } dataAlign="center" dataSort={true}> Date Modified </TableHeaderColumn>
    <TableHeaderColumn dataField="links.href" dataFormat={ this.actionFormatter } dataAlign="center" dataSort={true}> Actions </TableHeaderColumn>
</BootstrapTable>

I also try sortName='name' sortOrder='asc' and it doesnt work as well.

from react-bootstrap-table.

Is there any way to set the color of an entire row (or even a single cell) based on some data matching criteria? I want to use striped still, but I also want it so that if a certain cell data is of a value, I highlight the cell, column or row, such that I may have several successive rows highlighted to the color I indicated.

from react-bootstrap-table.

HI @kevinduffey , your requirement is great but currently this component does not support these feature, maybe I'll implement in future. If you really want, you can customize self component base this component. :)

from react-bootstrap-table.

So it turns out there IS a way to do it with your component right now.. although I am now moving away from bootstrap altogether. You basically just have the style= call a function that then checks the value of the cell/row... since the cell is the data of the cell, and the row is the entire object being iterated, its possible to check the row specific data against another value, and from that change the style applied tot he cell. The only downer is its on a per cell basis, instead of the full row.

from react-bootstrap-table.

yeah, you are right, I think it it not hard to add your requirement to this component, but in my opinion, the priority of this requirement is much lower than others, cause of this feature is a much customize function for me. So my answer is:

1. you can customize this component.
2. if you want to change column style, you can set class on TableHeaderColumn, the class you assign will be bring to each column in table body.

from react-bootstrap-table.

@AllenFang is there any way to add a className on the table so i could style the table, td and tr ?

from react-bootstrap-table.

HI @markmus just give the className to BootstrapTable for table and TableHeaderColumn for td. But tr does not support currently.

//update
if give class to BootstrapTable, I need check whether I pass down the class to table.

from react-bootstrap-table.

Hi All, use trClassName on <BootstrapTable> to add your css class name on row(tr)

and use columnClassName on <TableHeaderColumn> to add your css calss name on column(td)

finally, use classname on <TableHeaderColumn> to add your css calss name on header

All in newest version v1.0.0

from react-bootstrap-table.

Hi @AllenFang , it's the first time that i use rect boostrap tabel and i have this problem :/

and i'm sure that i import the right css style :/ :/ can you help me please ?

from react-bootstrap-table.

@Rickiweb, I thought you load the css of react-bootstrap-table fails absolutely, maybe you can check on the network panel in chrome dev tool.

from react-bootstrap-table.

i load this scripts :
< link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
Can you help me please !

from react-bootstrap-table.

@Rickiweb, is this

from react-bootstrap-table.

Absolutely, i got this error exactly like you said, what should i do now please ?

from react-bootstrap-table.

I have no idea about that, it's means the css file does not exist on your server or a wrong path, just check it out.

from react-bootstrap-table.

ok, thanx !

from react-bootstrap-table.

Hello!
Maybe somebody had a problem with className for selectRow prop?

Code is like that:

    const selectRowProp = {
      mode: 'checkbox',
      clickToSelect: true,
      className: 'custom-select-class',
      onSelect: this.handleRowClick,
      onSelectAll: this.handleCheckboxAllClick
    };
...
<BootstrapTable data={sitesList} selectRow={selectRowProp}>...</BootstrapTable>

and I do not have 'custom-select-class' anywhere.

from react-bootstrap-table.

@KseniyaT, upgrade your version and try again, custom-select-class will only be added when row was selected.

from react-bootstrap-table.