react-use-datatable

Common hooks and components to craft data tables

Install

npm install --save react-use-datatable

Example

import SomeWonderfulRj from "./my-rjs"
import { qpInt } from "magik-react-hooks/qpUtils"
import DataTable from "react-use-datatable"

const Component = () => {
  return (
    <div>
      <DataTable
        withQueryString
        rj={SomeWonderfulRj}
        config={() => ({
          name: {
            field: 'name_like',
            value: undefined
          },
          age: {
            value: undefined,
            encdec: qpInt(10)
          }
        })}>
        {({ people, pagination, loading }, { page, ...filters }, { onFilterChange, onFilterChangeDebounced, goToPage }) => (
          people ? 
            <div>
              <table border={1} style={{ width: '100%', borderCollapse: 'collapse', border: '1px solid black' }}>
              <thead>
                <tr>
                <th>ID</th>
                <th>
                  {'Name'}
                  <br />
                  <input type="text" name="title" value={filters.title || ''} onChange={onFilterChangeDebounced} />
                </th>
                <th>
                  {'Age'}
                  <br />
                  <input type="text" name="title" value={filters.title || ''} onChange={onFilterChangeDebounced} />
                </th>
                </tr>
              </thead>
              <tbody>
                {people.map(person => (
                <tr key={todo.id}>
                  <td>{todo.id}</td>
                  <td>{todo.name}</td>
                  <td>{todo.age}</td>
                </tr>
                ))}
              </tbody>
              </table>
              <p>
              {page > 0 && pagination.numPages > 0 &&
                <button type="button" onClick={() => { goToPage(page - 1) }}>Prev page</button>
              }
              <span style={{ marginLeft: 10, marginRight: 10 }}>Current page: {page}/{Math.max(1, pagination.numPages)}</span>
              {page < pagination.numPages &&
                <button type="button" onClick={() => { goToPage(page + 1) }}>Next page</button>
              }
              </p>
            </div> 
          : null
        )}
      </DataTable>
    </div>
  )

}

License

MIT © InMagik srl