tanstack / react-table Goto Github PK

Please add a full text search filter akin to datatables.js. This should include some UI such as a text box above the table and should search all columns/rows and filter the rows that do not match. Please also expose a javascript function for setting a full text search filter.

Love this data table - so much easier to work with than others that I've used. Awesome work.

Is there a way to apply styling to a row of data based on an attribute in the data? Or is the best way to do this to use rowValues and just change the rendering of each cell and put the check on each cell? Seems kind of repetitive, but if that's what I've got to do...

I have two use cases I need to cover and I was wondering if there are any examples of these already before I dive into figuring it out on my own

1. An editable table where the data in one row can be edited at a time and saving updates the table
2. A table where each row has a checkbox to select the row then a button to submit the selected rows

Thanks!

Can someone please update the storybook. Currently is it full of errors

Is there is any way to subscribe on row click event?

If it's not I can try to contribute it.

Please add an option for enabling a (multi) select box filter which lists distinct values in the column. This should be configurable on a per column basis. When one or more options are selected, the table should be filtered to only display rows which match the selection.

I believe it's happening because of https://github.com/tannerlinsley/react-table/blob/master/src/index.js#L146-L150

We have new pageSize in state variable, but it's overwritten by this.props with old pageSize value. Because of that following shouldComponentUpdate returns false, so despite new pageSize in state component is not re-rendered.

Is there a way to detect that a column is date type and sort accordingly?

Or alternatively, preserve the order that the data in the array given to the column is in?

Thanks!

Hey,

Thanks for this component btw.

I'm sure it's something I'm missing, but when I attempt to use this component out of the box with sample data within my app, there doesn't seem to be any sort of initial styling taking place. Should I be referencing the react-table.css file in my app ? I would assume I wouldn't need to and this would be handled accordingly and I could just override any and all existing element styling.

I haven't set any sorting, but the data is being listed on a (apparently) random order.

How can I make it list in the order I send to ReactTable?

I have upgrade my dependencies. It seems your code breaks around this line.

let visibleColumns = decoratedColumns.slice()
    let allVisibleColumns = []

    visibleColumns = visibleColumns.map((column, i) => {
      if (column.columns) {
        const visibleSubColumns = column.columns.filter(d => pivotBy.indexOf(d.id) > -1 ? false : _.getFirstDefined(d.show, true))
        return {
          ...column,
          columns: visibleSubColumns
        }
      }
      return column
    })

In the column object, setting style: {width: 20} does nothing. Any suggestions?

Hello,
I've just begun using react-table in a project and I wanted to roll my own styling. When inspecting the DOM elements I see a few of them get some styles in the style tag (presumably through JS since I'm not applying any styles yet). Both rt-th and rt-td get flex and width styles and rt-tbody gets a min-width. I would have expected absolutely no styling on the components when not including CSS or an option to turn off any JS styling so that I don't have to have !importants in my styles where I want to override these values (not to mention I'm not using Flexbox because of browser support constraints).

Is there any way to completely remove ALL the styles?

Wondering if anyone else is running into this issue... basically i'm rendering serverside and generating my API url dynamically based on the page/sorting requested. When a column is simple like so:

{header:'name', accessor:'name'}

There is no problem. But when I specify an accessor function like say:

{
  header: "Profession",
  accessor: d => d.profession.name,
  render: ({value, row}) => <a href={`/profile/profession/${row.profession.slug}`}>{value}</a>
},

This makes creating my API url really challenging, because when trying to sort by the 2nd example column i'm given the function itself, when I need to generate a string. Something like /users_data_endpoint?order=profession.name.asc&limit=20&offset=0. It would be great to be able to specify a sortKey so my column could look like:

{
  header: "Profession",
  accessor: d => d.profession.name,
  render: ({value, row}) => <a href={`/profile/profession/${row.profession.slug}`}>{value}</a>,
  sortKey: "profession.name",
},

And get this sortKey back as part of the sorting object in the instance argument in my onChange event listener. Does this make sense? Is anyone else facing a problem similar while doing serverside rendering?

Is it possible to set min/max width in percentage rather than pixels? Giving the variable minWidth: '40%' sets the inline style to 100px, which I think is the default.

I passed the table only two rows. For some reason, it still renders a full page of rows, with the last 18 or so rows blank.

Similar to #1, Pivoting on columns would be fairly straight forward to implement after #1 is finished. It might even make sense to develop both at the same time. Let's further discuss the requirements for this feature here.

It seems the totalpages is not changing even if the pages in the reacttable component changes

Fixed Columns present a big challenge for styling. Usually some type of scroll detection and mirroring is involved, which get's pretty messy very quickly. I'd be interested to gauge the need for this feature and also any ideas on how to implement it nicely without incurring massive changes to the structure of the component. Let's further discuss the requirements for this feature here.

Hi! I started to use react-table with create-react-app tool. And i get a warnings in console. There are several of them, but every about the same issue (You should write display: flex by final spec instead of display: box)

./~/react-scripts/~/css-loader?importLoaders=1!./~/react-scripts/~/postcss-loader!./~/react-table/react-table.css
autoprefixer: /node_modules/react-table/react-table.css:1:7441: You should write display: flex by final spec instead of display: box

Am i doing something wrong? I would be a very appreciated for advice or fix!))

Hey,

Is it possible to change the background of a Odd row through the config options ? Looking at the docs I'm thinking I would need to use either trStyleCallback: row => {} or trClassCallback: row => null. Is this correct? If so how would that look exactly ?

I could just override the css rules but looking to make sure there isn't an option available for this already. Thanks.

This would be quite simple. I mostly want to gauge quickly how a majority of devs would prefer this be implemented. Obviously you could build your own pretty easily and simply set the state of the instance to a specific page. I would prefer writing a hook/plugin area of the component first to allow programmatic changes to the paging, and then consider how we could quickly utilize that interface in the component itself. Possibly a select box, input box, or page pills as I have seen in some places. What does everything think?

When pressing the up and down arrows on the page number input, the page doesn't change, only if you confirm by pressing enter.

This one is interesting. Mostly because of React-Table's mobile first approach. I would love to hear some ideas on how to implement this, or even some examples of other grids that have achieved this in a great way. Let's further discuss the requirements for this feature here.

While the ReactTable component supports a paginationClassName prop (as mentioned in the docs), it doesn't seem to get passed down to the actual Pagination component. (Which, looking at the source, does actually honor that prop - it just isn't passed down.)

Thanks for creating this component, it works great for our use case!

I would like to move the Expander Component to right side of the table. By default it renders to the left.
How can I achieve this?

Hey,

When I create the table extra rows seem to be created, yet I only have 4 records in my global variable.

` handleAssignedBookings() {
//get bookings
let data,
columns,
options = {};

    data = DATA.bookings.map( function(items) {
        if( items.status != 'pending' ) {
            return items;
        }
    });

    //get columns
    columns = [
        {
            header: 'Name',
            accessor: 'driver.firstName',
        },
        {
            header: 'Pick-up Date/Time',
            accessor: 'pickUp.dateTime',
        },
        {
            header: 'From',
            accessor: 'from.location',
        },
        {
            header: 'To',
            accessor: 'to.location',
        },
        {
            header: 'Status',
            accessor: 'status'
        }
    ];

    //set table config options
    //https://github.com/tannerlinsley/react-table#props
    options = {
        showPageSizeOptions: false,
        showPageJump: false,
        showPagination: false
    }

    return {
        data: data,
        columns: columns,
        options: options
    }
}`

This is one of me methods that I pass to create the table. I've also attached an image

Thanks

Hi!

I have sat the property loading to false but loading over lay still showing.

Instead of having the column headers at the top of the table and the data going down, would like to have the headers in the left column and the data in the cell next to the header.

         My Table
| **Header 1:** | data 1 |
| **Header 2:** | data 2 |
| **Header 3:** | data 3 |

right now i use redux and pull a list of users into props and drop it into ReactTable like so.. i use Immutablejs and store them in a users.results store hence users.get('results')

<ReactTable
    tableClassName='table table-striped'
    data={users.get('results')}
    columns={_columns}
/>

the backend returns data like so in a paged format (using sailsjs)

{
  "code": "OK",
  "message": "Operation is successfully executed",
  "data": [
    {
      "groups": [
        {
          "name": "Users",
          "accessLevel": 1,
          "id": 2,
          "createdAt": "2016-10-24T20:37:50.889Z",
          "updatedAt": "2016-10-24T20:37:50.889Z"
        }
      ],
      "username": "GarretKertzmann57",
      "email": "[email protected]",
      "firstName": "Dangelo",
      "lastName": "Muller",
      "photo": "",
      "accountType": "local",
      "id": 1,
      "createdAt": "2016-10-24T20:37:51.592Z",
      "updatedAt": "2016-10-24T20:37:52.201Z"
    }
  ],
  "criteria": {},
  "limit": 20,
  "start": 0,
  "end": 20,
  "page": 0
}

and the api code in react looks like this to handle the fetching of data, yet im not sure how to go about handling this so ReactTable can fetch the data for me. Would you be able to provide a working example of getting the code to work? Api.get() is a middleware I wrote which wraps axios.

export const find = (params = {}, payload = {}) => {
  return (dispatch, getState) => {
    return new Promise((resolve, reject) => {
      dispatch(getUsers({ ...params, payload }))
      log.debug('Users::find::initial', params, payload)
      Api.get('/users', { auth: true, populate: ['groups'] }, payload)
      .then((response) => {
        log.debug('Users::find::success', params, payload, response)
        return response
      })
      .then(({ data }) => {
        dispatch(gotUsers(data))
        resolve(data)
      })
      .catch((err) => {
        log.error(err)
        if (err.status === 401) {
          dispatch(Notification.emit({
            msg: err.data.message,
            visible: true,
            dismissable: true,
            type: 'error'
          }))
          dispatch(errorReceivingData(err))
        }
      })
    })
  }
}

Hey, I'm having some trouble implementing custom sorting. Say I have a component

const BigTable = (props) => {
  let { data } = props
  return (
    <ReactTable
      data={data}
      columns={columns}
    />
  )
}

If I had an age column, that was a string, and I wanted to use a function like (a, b) => parseInt(a) - parseInt(b) to sort the data. From the docs I've been trying to set the table to manual use onSortingChange, but I can't figure out how to use it properly. Any chance you could point me in the right direction?

const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
        name: 'Jason Maurer',
        age: 23
    }
},{
    name: 'Banner Dansley',
    age: 19,
    friend: {
        name: 'Jason Mraz',
        age: 30
    }
}]

const columns = [{
  header: 'Name',
  accessor: 'name' // String-based value accessors !
}, {
  header: 'Age',
  accessor: 'age',
  render: <input type="checkbox" checked="checked"/> // Custom cell components!
}, {
  header: 'Friend Name',
  accessor: 'friend.name' // Custom value accessors!
}, {
  header: 'Friend Age',
  //header: props => <span>Friend Age</span>, // Custom header components!
  accessor: 'friend.age'
}]

<ReactTable
     data={data}
     columns={columns}
     minRows={0}
/>

Result:

<div class="-td-inner">
    <input type="checkbox" value="on">   <----- should be rendered as <input type="checkbox" checked="checked"/>
</div>

Let's say I have opened the third row's subcomponent.

When a row's data changes and causes the table to re-sort, the opened component will re-render with the information from the new data that's in the third row. (this causes all the data to change in the subcomponent when the row re-sorts, which is kind of annoying)

If the data is changing a lot, then a user will have to keep closing and reopening. Is there any way to turn off auto-sorting so sorting only happens when a user clicks on a column header, and doesn't auto sort otherwise? (sortable=false seems to do this only initially- when a user clicks on a column header the row starts to sort automatically on data refresh)

http://stackoverflow.com/questions/20057581/css-webkit-appearance-none-is-causing-checkbox-to-not-be-checked

Thanks for this project!

I noticed that the GitHub page links to http://react-table.js.org/ but I'm getting 404s when I visit that page.

Hi there,

Is there any plan to implement a selectable row option natively into the reacttable component, or is this something I should be expected to implement myself with an additional column?

Cheers

Is is possible to style td tags conditionally? Can I see some sample code. The Function Rendering section in the docs should suffice, but don't know how to change a td's background color based on the data I give to react-table.

Hey Tanner, thanks for the great table.
I really like the table styles in the storybook, are those the default styles? and how do I import those into my own application? Thanks!

-figured it out, sorry!

Hi,
I'm trying to run this repo after forking but unable to do so.
I have tried the steps mentioned in the Readme file..

When I do yarn , I get the following error:

I'm not sure if this is due to yarn itself or something else.
I have also attached the debug log
npm-debug.txt
.

I'm trying to use the server-side data example which will work until I add a setTimeout and then I get a few console errors. Here's the sample code:

Works --

const data  = [{name:'test', id:1234}];
return (
  <div>
    <ReactTable
      pageSize={10}
      columns={columns}
      data={(params, callback) => {
        callback({ rows:data })
      }}
    />
  </div>
)

Doesn't work --

const data  = [{name:'test', id:1234}];
return (
  <div>
    <ReactTable
      pageSize={10}
      columns={columns}
      data={(params, callback) => {
        setTimeout(() => {
          callback({ rows:data })
        })
      }}
    />
  </div>
)

The second test will work if initialized with the callback like so:

const data  = [{name:'test', id:1234}];
return (
  <div>
    <ReactTable
      pageSize={10}
      columns={columns}
      data={(params, callback) => {
        columns={columns}
        setTimeout(() => {
          callback({ rows:data })
        })
      }}
    />
  </div>
)

Would it be possible to add a onTrHover callback prop, to complement the onTrClick prop?

If I add a table with a SubComponent it gives me a "key" warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `src`. See https://fb.me/react-warning-keys for more information.

This happens even including a very simple SubComponent:

SubComponent={(x) => (<div>hi</div>)}

I believe it is because the Expander Cell fields do not have a "key" attribute even though they are within the allVisibleColumns map.
Expander Cell Code

The pivot columns might have the same issue but I haven't tested it.

Overall I'm really happy with this library.

Would love to implement this, and honestly wouldn't be too difficult. Any help here would be appreciated as well. This would be a great intermediate PR for anyone looking to contribute. Let's further discuss some of the requirements of the feature here until we have a solid grasp of the feature.

In contrast to the documentation, ReactTable doesn't seem to actually support a prop named paginationComponent. The mentioned previousComponent and nextComponent do exist and work correctly, it's just the paginationComponent that isn't implemented.

The Data section of README.md says "Client-side filtering and pagination is built in". I see the pagination, but no signs of filters. Can you point me to how I might enable filtering? Or perhaps more likely the README needs to be edited?

Thanks for the nice package.

So similar to onRowClick in fixed-data-table

Just a heads up that the github link does not work in react storybook. The url is there but it looks like storybook might be suppressing the new window/navigation.

I have a react-table component in my app and pass there next props:

<ReactTable
  data={this.props.words}
  columns={columns}
  getTrProps={changing_state_func}
/>

changing_state_func is a function that changes state of the component that wraps react-table. Specifically, this function fills an array that contains ids of the data objects for rows. So I'd like to highlight the rows with the data for those ids... Cannot figure it out how to do it.