Reply To: Anyone familiar with common pitfalls in: Table?

[admin]

Hi,

You can try this:

React + Redux integration (realistic pattern)
1. Treat Smart Table as controlled

<Table
  dataSource={data}
  sortMode="one"
  filterable
  paging
  pageIndex={page}
  pageSize={pageSize}
  onSort={handleSort}
  onFilter={handleFilter}
  onPage={handlePage}
/>

Wire events, Redux

const handleSort = (e) => {
  dispatch({
    type: 'SET_SORT',
    payload: e.detail.sortColumns
  });
};

const handleFilter = (e) => {
  dispatch({
    type: 'SET_FILTER',
    payload: e.detail.filters
  });
};

const handlePage = (e) => {
  dispatch({
    type: 'SET_PAGE',
    payload: e.detail.pageIndex
  });
};

Trigger API calls from state changes

useEffect(() => {
  dispatch(fetchTableData());
}, [sort, filter, page, pageSize]);

Fetch with state applied

export const fetchTableData = () => async (dispatch, getState) => {
  const { sort, filter, page, pageSize } = getState().table;

  const query = new URLSearchParams({
    page,
    size: pageSize,
    sort: JSON.stringify(sort),
    filter: JSON.stringify(filter)
  });

  const res = await fetch(<code>/api/data?${query}</code>);
  const data = await res.json();

  dispatch({ type: 'SET_DATA', payload: data });
};

Regards,
Markov