Closed ahmetunal closed 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.
@imballinst You are right, this is much better, and more useful.
@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!
@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.
@imballinst, thank you.
Need: To access pagination info externally
tableEventsRef.current.pagination