imballinst / react-bs-datatable

Bootstrap datatable without jQuery. Features include: filter, sort, pagination, checkbox, and control customization.
https://imballinst.github.io/react-bs-datatable
MIT License
59 stars 20 forks source link

Add pagination data to useImperativeHandle to be accessed externally #127

Closed ahmetunal closed 2 years ago

ahmetunal commented 2 years ago

Need: To access pagination info externally tableEventsRef.current.pagination

imballinst commented 2 years ago

I, hmmm, I don't think this is the correct design decision? Back then I agreed to use useImperativeHandle despite the fact that it was an anti-pattern, because I thought it was only to "execute order from outside".

But, if we add states into it, I think it can get pretty messy later. I propose this: useDatatableWrapper is now import-able from react-bs-datatable. We can then do this:

function SortStateComponent() {
  const { sortState, onSortByPropChange } = useDatatableWrapper();

  return (
    <div style={{ padding: 8 }}>
      <label>Sort state</label>
      <pre>{JSON.stringify(sortState)}</pre>

      <button onClick={() => onSortByPropChange("name")}>
        External sort by name
      </button>
      <button onClick={() => onSortByPropChange("username")}>
        External sort by username
      </button>
    </div>
  );
}

// render the table...
<DatatableWrapper
  body={TABLE_BODY}
  headers={STORY_HEADERS}
  paginationOptionsProps={{
    initialState: {
      rowsPerPage: 10,
      options: [5, 10, 15, 20]
    }
  }}
>
  <SortStateComponent />
</DatatableWrapper>

Sample demo: https://codesandbox.io/s/react-bs-datatable-3-1-1-alpha-1-h1g890?file=/src/App.js

Please let me know what do you think about this. I think this is a fairly simpler approach and more superior than the refs approach that I chose before, because we can now access all of the table's states and functions.

ahmetunal commented 2 years ago

@imballinst You are right, this is much better, and more useful.

imballinst commented 2 years ago

@ahmetunal alright, cool! I will release 3.1.1 today with the useDatatableWrapper function exported and will get post a comment here once it is published. Thanks for the confirmation!

imballinst commented 2 years ago

@ahmetunal I just published it, but instead of 3.1.1, it's 3.2.0, considering it technically is a new "feature", in a way. Sample sandbox: https://codesandbox.io/s/red-snow-himjbq.

Let me know if you have any feedback regarding this. Thanks! I am closing this PR for now.

ahmetunal commented 2 years ago

@imballinst, thank you.