Nothing is working!!

[manivasu]

I wasted time to install it and run the application, whatever it is showing in demo is completely opposite to show it in repo. No Pagination working, and NO filtering of data in table .. simply. nothing!!!

Kindly dont waste anyone time on this.

In case am wrong kindly revert back to this issue, i will show you what i feel wrong.

Thanks!

[advance512]

Did you want pagination, filtering and sorting that work on the data inputted to the table?

[manivasu]

Yes

On 13-Mar-2017 9:02 am, "Alon Diamant" [email protected] wrote:

Did you want pagination, filtering and sorting that work on the data inputted to the table?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hyojin/material-ui-datatables/issues/6#issuecomment-286008041, or mute the thread https://github.com/notifications/unsubscribe-auth/ARUa9bfPFJjLTKzm0JoDlDrfrQ6QStZ6ks5rlLjIgaJpZM4MDbdA .

[advance512]

Well, pagination did work for me. Didn't try filtering or sorting.

[frankvdb7]

I can confirm that pagination is not working as expected; If I use a data array with a length of 100 and set the row count property on 10, it will still display all 100 data rows. Instead of the expected 10 per page.

[oim5nu]

Pagination needs a bit of tweaking.

Thanks first, Hyojin. Here is my 2 cents:

const TABLE_COLUMNS = [ { key: 'name', label: 'Name', className: 'important-column', sortable: true, style: { width: 400, }, tooltip: 'Name', }, { key: 'current_version', label: 'Version', sortable: false, tooltip: 'Version', }, { key: 'locations', label: 'Locations', sortable: false, tooltip: 'Locations', }, { key: 'action', label: 'Action', sortable: false, tooltip: 'Action', } ]; ... this.state = { errors: {}, clients_filtered: [], clients_in_page: [], per_page: 10, page: 1, total_pages: 1 }; ...

handleNextPageClick() { console.log('handleNextPageClick'); const page = this.state.page + 1; if (page <= this.state.total_pages && page >= 1) { const { clients_filtered, per_page } = this.state; const paginatedItems = Helper.getPaginatedItems(clients_filtered, per_page, page); const paginatedClients = paginatedItems.data; this.setState({ clients_in_page: paginatedClients, page }); } }

...

return (
  <div style={styles.container}>
    <div style={styles.component}>
      <Card style={{margin: 12, textAlign: 'left'}}>
        <CardHeader
        />
        <DataTables
          title="Clients"
          titleStyle={{fontSize: 20}}
          height={'auto'}
          selectable={false}
          showRowHover={true}
          columns={TABLE_COLUMNS}
          data={this.state.clients_in_page}
          page={this.state.page}
          onNextPageClick={this.handleNextPageClick}
          onPreviousPageClick={this.handlePreviousPageClick}
          onRowSelection={this.handleRowSelection}
          onFilterValueChange={this.handleFilterValueChange}
          onSortOrderChange={this.handleSortOrderChange}
          onCellClick={this.handleCellClick}
          onCellDoubleClick={this.handleCellDoubleClick}
          count={this.state.clients_filtered.length}
          showCheckboxes={false}
          showHeaderToolbar={true}
          footerToolbarStyle={styles.footerToolbarStyle}
          toolbarIconRight={[
            <IconButton
              onClick={this.handlePersonAddClick}
            >
              <PersonAdd />
            </IconButton>,
            /*
            <IconButton
              onClick={this.handleInfoClick}
            >
              <InfoOutline />
            </IconButton> */
          ]}
        />
      </Card>
    </div>
  </div>
);

// help.js import _ from 'lodash';

export default { /**

• Obtain items based on page
• @param {arrayOfObjects, number} token */ getPaginatedItems(items, per_page=10, page=1) { const offset = (page -1) * per_page; // const paginatedItems = _.rest(items, offset).slice(0, per_page); //this is for underscore const paginatedItems = _(items).drop(offset).take(per_page).value(); return { page: page, per_page: per_page, total: items.length, total_pages: Math.ceil(items.length / per_page), data: paginatedItems } } }

[hyojin]

@oim5nu Thanks for giving us your code. @fmavdb I'm sorry to confuse you, but so far, it doesn't provide features which are all done within the component. It's more like a helper component to render data. Client side only functions like pagination, sorting works quite well mostly but sometimes we need to handle data we can't fetch at one time. So it gives you choices. If you already have some api, you can combine. Or you can implement on your client side code. Here is my demo code: https://github.com/hyojin/material-ui-datatables/tree/gh-pages/demo/src Thanks!