import React from 'react';
import ReactDatatable from 'react-datatable';

class Page extends React.Components {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { name: 'First Name', key: 'first_name' },
        { name: 'Last Name', key: 'last_name' },
        { name: 'Username', key: 'username' },
        { name: 'Email', key: 'email' },
      ],
      data: [
        {
          id: 1,
          first_name: 'John',
          last_name: 'Doe',
          username: 'john.doe',
          email: '[email protected]',
        },
        {
          id: 2,
          first_name: 'Jane',
          last_name: 'Doe',
          username: 'jane.doe',
          email: '[email protected]',
        },
        {
          id: 3,
          first_name: 'Joe',
          last_name: 'Doe',
          username: 'joe.doe',
          email: '[email protected]',
        },
      ],
      meta: {
        page: '1',
        limit: '10',
        search: '',
        total_data: 3,
        total_page: 1
      }
    }
  }

  fetchData = async () => {
    // HTTP Request to get your data here
    // Based on your meta as updated in updateMeta()
  }

  updateMeta = (meta = this.state.meta) => {
    this.setState({ meta }, () => this.fetchData());
  }

  render() {
    return (
      <ReactDatatable
        columns={this.state.columns}
        rows={this.state.rows}
        meta={this.state.meta}
        updateMeta={this.updateMeta}
        />
    )
  }
}