tanstack / table Goto Github PK
View Code? Open in Web Editor NEW๐ค Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
Home Page: https://tanstack.com/table
License: MIT License
๐ค Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
Home Page: https://tanstack.com/table
License: MIT License
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?
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.
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?
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))
}
})
})
}
}
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 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
Thanks!
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.
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?
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.
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!
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.
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...
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.
Is there is any way to subscribe on row click event?
If it's not I can try to contribute it.
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)
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.
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?
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.
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
})
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!
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.
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.
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.
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!))
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.
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!
In the column object, setting style: {width: 20}
does nothing. Any suggestions?
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>
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.
Hi!
I have sat the property loading to false but loading over lay still showing.
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
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 |
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
.
When pressing the up and down arrows on the page number input, the page doesn't change, only if you confirm by pressing enter.
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>
)
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
Can someone please update the storybook. Currently is it full of errors
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?
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
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.
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?
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.
Would it be possible to add a onTrHover
callback prop, to complement the onTrClick
prop?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.