jbetancur / react-data-table-component Goto Github PK

OnSort sends not updated state value.

• By default, a row must have a keyField. This is usually something like id but can be overridden with the keyfield property. However, in some cases, the id may not exist.

• In this case, the table library should just use the row index to define a default key. While it is not ideal to have a collection that is not keyed, it will prevent issues/warnings.

I explored the possibility of having an old school paginate where you page by page number, but after some research, I've decided to prioritize search/filtering and pagination as a last option for the UX. I will support either an infinite scroll or "Load More" option (or both)

Hi,

I'm looking for adding a custom element instead of the default expander button, is there any way to do that with the current props of the component?

And also, I want to disable the expandable feature for some specific rows due to data validations, but I don't know if this is possible.

I hope you can help me clarify these questions.

Thanks!

Instead of prop drilling - implement React Context

In a table by default page number will be 1 but i want to set it to any number dynamically.
Any idea?

Thanks

How to Filter ?

Is your feature request related to a problem? Please describe.

I'm using the server-side paging table, the problem that when I try to sort data by column the data is not sorted, because the data is server-side paged.

Describe the solution you'd like

Add a method that intercepts which column you are trying to sort at the time the action takes place and what sort of sort "asc or desc".

I'll like to use your pagination style but I need to override the whole click handlers so I can paginate over an API.

like:

position: relative;
 display: flex;
 width: 100%;
 height: 100%;
 flex-direction: column;
 flex: 1 1 auto;

This will make the table a bit more "compressible" and "responsive" eventually I want to have a card option to turn the table into cards or a list view when a certain viewPort is reached

This will likely be a HoC along with a prop array of searchable selectors: e.g.
Proposed API

searchFields={['name', 'created']}

onSearch={(value, results) => handleSearch}

const data = [
{
title: 'Conan the Barbarian',
year: '1982',
summary: 'Orphaned boy Conan is enslaved after his village is destroyed...'
},{
title: 'Conan the Barbarian',
year: '1982',
summary: 'Orphaned boy Conan is enslaved after his village is destroyed...'
},{
title: 'Conan the Barbarian',
year: '1982',
summary: 'Orphaned boy Conan is enslaved after his village is destroyed...'
},{
title: 'Conan the Barbarian',
year: '1982',
summary: 'Orphaned boy Conan is enslaved after his village is destroyed...'
},{
title: 'Conan the Barbarian',
year: '1982',
summary: 'Orphaned boy Conan is enslaved after his village is destroyed...'
},{
title: 'Conan the Barbarian',
year: '1982',
summary: 'Orphaned boy Conan is enslaved after his village is destroyed...'
},
];

<DataTable
title="Arnold Movies"
columns={columns}
data={data}
selectableRows // add for checkbox selection
onTableUpdate={handleChange}
expandableRows
expandableRowsComponent={}
/>

const ExpanableComponent = ({ data }) =>

data.title is undefined for some reason

when recalculating rows memoize the sort

It turns out that the Expandable Rows feature was overlooked in 1.0.0 and also when Pagination was introduced.

Currently, expandable rows adds a new row to the data table state and are filtered to be an expanded row using the $$expander field. Since it is a row, expanding rows breaks pagination as well.

This is a remnant of an earlier version that used <table..> tags where adding adjacent elements to a table in the DOM was not allowed and/or was hard to reason about (i.e. colspan). The strategy to solve this was to add the expanded rows into the rows Array.

Now that React Data Table Component is div/flex based this complex strategy is no longer needed and we can simply just render a new "expanded row" below the row we want to expand.

Theoretically, this should increase performance as previous expensive-ish expander row calculations no longer need to be performed. Another, side benefit is sorting while expanded is now supported (if you're into that sort of thing).

• should remove all old expander code
• should toggle expand
• should not affect pagination

• While Enzyme has served this project well, it unfortunatly limits us from upgrading to the new React.Context. Support for Enzyme React.Context has been in development for some time after the React.Context release.
• In any case, away from enzyme's imperative testing. Instead migrate to the @#(*$# awesome https://github.com/kentcdodds/react-testing-library

• Less nesting of components.
• More readable code

if i adding or removing entity the table re-render and shown the update data but when i edit some entity of the table the table not re-render until i refresh the page manualy
my edit action update the state to fix it i need to delete the entire row call setState and than add the updated row and than call setState again.

thanks.

Ideally, I would want this to be dynamic to the container height. For now, the api should have a fixedHeaderScrollHeight

Table is restrictive in terms of being able to handle mobile and more responsive layouts. There are also limits if we want to implement drag col resizing.

This might add more complexity for the columns API, but it will also add more flexibility
e.g. width, minWidth, and maxWidth vs just width

Hi, I'm trying to update the table columns dynamically along with data using state but its not taking new value from the state rather than its showing old columns.

Don't know its because of table issue or my code.

Thanks

• Upgrade rollup/config
• Upgrade Babel
• Upgrade ESLINT
  • Refactor new linting errors as needed

• When using React-md Checkbox the id is not being set

Failed prop type: The prop `id` is required to make `Checkbox` accessible for users of assistive technologies such as screen readers.

Describe the bug

I'm using your module, in a column of the table I generate a qrcode, I have to make sure that when you click on the image of the qr code a function is called.

To Reproduce

Steps to reproduce the behavior:
Click image qr code

Expected behavior

The function is called.

Code Sandbox

https://codesandbox.io/s/react-data-table-sandbox-j5ed9

This code was meant to reset the page to 1 upon changing the rows per page, which might be fine, except when server-side paging where it ends up calling the api twice if you are handling the API call in on OnChangePageRows callback

handleRowsPerPage = ({ target }) => {
    const { onChangePage, onChangeRowsPerPage } = this.props;

    onChangeRowsPerPage(Number(target.value));
    // TODO: fix empty array on perRows change
    onChangePage(1);
  }

Is your feature request related to a problem? Please describe.
Yes. I need to show total number of records from database query. Based on that I'll have to get paginated data from server. Right now it's taking total number of pages from Data length.

Describe the solution you'd like
Total number of records should be changeable. There should be props like NumberOfPages/TotalRecords
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Fix

When the data in the table changes externally (e.g. polling or intentional change) react data table internally will recalculate the sorting, however, it seems that this is not happening and instead the table sorts back to its default sort props

Remove import { polyfill } from 'react-lifecycles-compat';

GA 1.0 will only support react 16.3+

The problem with using e.stopPropogation with the ignoreRowClick feature is it prevents any click events to children that expect it.

Case in point, a dropdown menu in a row needs the click event so it can maintain its state, or close other drop downs when the focus is changed

To solve this we can use an absolutely positioned div to act as a "Mask" or "Clip" for each TableCell that passes the onRowClicked handler to the "Clip" div instead of the TableCell. In other words, we no longer make the Row respond to click events, but the individual table cells.

When column.ignoreRowClick = true, it will not render a "Clip" div thereby making the TableCell "non-clickable"

Technically, onRowClick doesn't make sense as a prop name, but it is less confusing than onTableCellClicked as an api, giving the illusion that the row can be clicked when it's actually the "Clip" div that is listening for the click event.

To illustrate, the red masks are onRowClick clickable cells and the white column is ignored (via ignoreRowClick.

To mitigate performance issues with this approach, we can use event-delegation to prevent too TableCells from creating their own onclick event listener

Describe the bug

Changing the number of rows per page does not re-calculate the page number to ensure that there are rows to display. This is the default behaviour specified in the changelog for 1.5.1, but it results in the component showing no data if the current page fetches no data with the new number of rows per page.

To Reproduce

Steps to reproduce the behavior:

• Open this example: https://jbetancur.github.io/react-data-table-component/?selectedKind=Advanced&selectedStory=Server-Side%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
• Go to the second page using the pagination controls
• Change the rows per page to something > 10 (15 works)
• Observe that it sees no data for that page and shows the no data component. The only way to move to a valid page is to reload the component because the pagination controls are hidden.

Expected behaviour

The component should calculate a new page based off the current page and the old / new perPage values. It should not attempt to show a page where the provided count is < the number of rows per page * page number. I think ideally it would try to show a page which is as close to the original page as possible, maybe something like
Math.floor((oldPerPage * page) / newPerPage) - 1 for pages starting at 0

Code Sandbox

https://jbetancur.github.io/react-data-table-component/?selectedKind=Advanced&selectedStory=Server-Side%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

Screenshots

N/A

Versions (please complete the following information)

• React ^16.8.6
• Styled Components ^4.2.0
• OS: Linux
• Browser: Firefox developer edition v68.0b9
• Version: 1.5.3

Additional context

N/A

Describe the bug

I tried to put the responsive property in the table but it seems to be malfunctioning.

To Reproduce

Steps to reproduce the behavior:
I open the page in question is the resize.

Expected behavior

That the table was resized.

The code would be more readable/performant to move to the current props in getDerivedStateFromProps into memoized functions

I would like to leave the messages as "Rows per page:" in Portuguese.

Is it possible to do alternative line colours?

• expandableRows should just be expandable
• selectableRows should just be selectable
• etc...

defaultSortAsc={false} when you want desc behavior seems weird

I'll be taking a look at cleaning up the API a bit for 1.0.0

I have been trying to get my table to load in data from my database but have not been able to get any data structure to pass through properly. I currently have it as an array of object literals as shown in your read.me. It seems that as soon as I pass in the data prop it breaks.

I have even tried using the basic table example and it breaks as soon as the data prop is passed also. Everything seems to be working until I pass in data to the data prop.

Any guidance would be helpful, thanks in advance.

The reason this happens is that we are delegating events from TableRow to an using an absolutely positioned click mask in TableCell in order to support a key feature that allows you to click a TableRow and access the onRowClicked Event. By the same token, this feature prevents click events for columns that have the column.ignoreRowClick property.

The problem is that this absolutely positioned div blocks selection of text. You could say this is a "DRM" feature :) but really it's kind of an annoying bug (front a certain point of view) 👋

Personally, I dislike the row select feature but I know it is popular in some apps.. So, for now it needs to be supported/fixed.

Increase Test coverage/cases

e.g. make the props alphabetic
and/or integrate them into storybooks

This library looks great.
Just wondering if this table has fixed header feature...

Regards.

Using styled components, how can I add new css properties to the Table Row? (as opposed to just overriding existing ones, I can achieve that with the theme)

In a fashion similar to below.

import DataTable from 'react-data-table-component';

const MyDataTable = styled(DataTable)`
  background: blue;
 .TableRowClass {
    float: left
 }
`;

class DashboardPage extends React.Component {
  render() {
    return (
      <div className="page page-dashboard">
            <MyDataTable spacing title="Arnold Movies" columns={columns} data={data}  />
      </div>
    );
  }
}

I'd like to do this without modifying the source code of the library.

Some of the sub components (like the rows) do not have class that I can target.

I have explored using the component itself in the styled template literal, ie

import TableRowStyle from 'react-data-table-component';

const MyDataTable = styled(DataTable)`
  background: blue;
  ${TableRowStyle} {
    float: left
  }
`;

But I cannot seem to get that work. I think for a start the import doesnt even work because the sub components are not exported.

Any feedback on how to achieve this is welcome. Thankyou.

I am using the pagination, I would like to call my API on each page change and get the paginated data.

I am able to call the the API and I can confirm I have the updated data from the API in my state after the page change.

But the DataTable component does not seem to update with the new data.

If I create a button and just fetch new data from the API outside of the handleChangePage function the component will update with the new state.

I think there might be a bug specific to the pagination/handleChangePage? At the moment I have had to build my own pagination component, but the one that comes with your library looks really slick so i'd prefer to use that!

  handleChangePage(state) {
    log.debug('handleChangePage: ', state); // Page 2
    axios.get('/users?limit=10&skip=10').then(res => {
       this.setState({data: res.data})
    })
  }
  render() {
    return (
      <DataTable
        data={this.state.data}
        onChangePage={this.handleChangePage}

• Buttons Should always be padded correctly/centered
• Requires slight refactor of styling