rsr

react-super-responsive-data-table

Dynamic table component.

Showing:

Popularity

Downloads/wk

12

GitHub Stars

10

Maintenance

Last Commit

1mo ago

Contributors

0

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-super-responsive-data-table

Coverage Status npm downloads code style: prettier

react-super-responsive-data-table converts your table data to a user-friendly list in mobile view with high performance data rendering and smart filter and sorting.

Installation

npm install react-super-responsive-data-table --save

Usage

  1. import AdvancedTable from 'react-super-responsive-data-table'
  2. Write your html table with the imported components.
import React from 'react';
import AdvancedTable from 'react-super-responsive-data-table';


() => {
  const [details, setDetails] = useState([])
  const columns = [
    {
      key: 'name',
      _style: { width: '40%' },
      _props: { color: 'primary', className: 'fw-semibold' },
    },
    'registered',
    { key: 'role', filter: false, sorter: false, _style: { width: '20%' } },
    { key: 'status', _style: { width: '20%' } },
    {
      key: 'show_details',
      label: '',
      _style: { width: '1%' },
      filter: false,
      sorter: false,
      _props: { color: 'primary', className: 'fw-semibold' },
    },
  ]
  const usersData = [
    {
      id: 0,
      name: 'John Doe',
      registered: '2018/01/01',
      role: 'Guest',
      status: 'Pending',
    },
    {
      id: 1,
      name: 'Samppa Nori',
      registered: '2018/01/01',
      role: 'Member',
      status: 'Active',
      _props: { color: 'primary', align: 'middle' },
    },
    {
      id: 2,
      name: 'Estavan Lykos',
      registered: '2018/02/01',
      role: 'Staff',
      status: 'Banned',
      _cellProps: {
        all: { className: 'fw-semibold' },
        name: { color: 'info' },
      },
    },
    {
      id: 3,
      name: 'Chetan Mohamed',
      registered: '2018/02/01',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 4,
      name: 'Derick Maximinus',
      registered: '2018/03/01',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 5,
      name: 'Friderik Dávid',
      registered: '2018/01/21',
      role: 'Staff',
      status: 'Active',
    },
    {
      id: 6,
      name: 'Yiorgos Avraamu',
      registered: '2018/01/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 7,
      name: 'Avram Tarasios',
      registered: '2018/02/01',
      role: 'Staff',
      status: 'Banned',
      _props: { color: 'warning', align: 'middle' },
    },
    {
      id: 8,
      name: 'Quintin Ed',
      registered: '2018/02/01',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 9,
      name: 'Enéas Kwadwo',
      registered: '2018/03/01',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 10,
      name: 'Agapetus Tadeáš',
      registered: '2018/01/21',
      role: 'Staff',
      status: 'Active',
    },
    {
      id: 11,
      name: 'Carwyn Fachtna',
      registered: '2018/01/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 12,
      name: 'Nehemiah Tatius',
      registered: '2018/02/01',
      role: 'Staff',
      status: 'Banned',
    },
    {
      id: 13,
      name: 'Ebbe Gemariah',
      registered: '2018/02/01',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 14,
      name: 'Eustorgios Amulius',
      registered: '2018/03/01',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 15,
      name: 'Leopold Gáspár',
      registered: '2018/01/21',
      role: 'Staff',
      status: 'Active',
    },
    {
      id: 16,
      name: 'Pompeius René',
      registered: '2018/01/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 17,
      name: 'Paĉjo Jadon',
      registered: '2018/02/01',
      role: 'Staff',
      status: 'Banned',
    },
    {
      id: 18,
      name: 'Micheal Mercurius',
      registered: '2018/02/01',
      role: 'Admin',
      status: 'Inactive',
    },
    {
      id: 19,
      name: 'Ganesha Dubhghall',
      registered: '2018/03/01',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 20,
      name: 'Hiroto Šimun',
      registered: '2018/01/21',
      role: 'Staff',
      status: 'Active',
    },
    {
      id: 21,
      name: 'Vishnu Serghei',
      registered: '2018/01/01',
      role: 'Member',
      status: 'Active',
    },
    {
      id: 22,
      name: 'Zbyněk Phoibos',
      registered: '2018/02/01',
      role: 'Staff',
      status: 'Banned',
    },
    {
      id: 23,
      name: 'Aulus Agmundr',
      registered: '2018/01/01',
      role: 'Member',
      status: 'Pending',
    },
    {
      id: 42,
      name: 'Ford Prefect',
      registered: '2001/05/25',
      role: 'Alien',
      status: "Don't panic!",
    },
  ]
  const getBadge = status => {
    switch (status) {
      case 'Active':
        return 'success'
      case 'Inactive':
        return 'secondary'
      case 'Pending':
        return 'warning'
      case 'Banned':
        return 'danger'
      default:
        return 'primary'
    }
  }
  const toggleDetails = index => {
    const position = details.indexOf(index)
    let newDetails = details.slice()
    if (position !== -1) {
      newDetails.splice(position, 1)
    } else {
      newDetails = [...details, index]
    }
    setDetails(newDetails)
  }
  return (
    <AdvancedTable
      sorterValue={{ column: 'name', state: 'asc' }}
      clickableRows
      onRowClick={(item, index, columnName, event) => {
        console.log(item)
        console.log(index)
        console.log(columnName)
        console.log(event)
      }}
      tableProps={{
        striped: true,
        hover: true,
      }}
      tableHeadProps={{
        color: 'danger',
      }}
      activePage={3}
      footer
      items={usersData}
      columns={columns}
      columnFilter
      tableFilter
      cleaner
      itemsPerPageSelect
      itemsPerPage={5}
      columnSorter
      pagination
      scopedColumns={{
        status: item => (
          <td>
            <CBadge color={getBadge(item.status)}>{item.status}</CBadge>
          </td>
        ),
        show_details: item => {
          return (
            <td className="py-2">
              <CButton
                color="primary"
                variant="outline"
                shape="square"
                size="sm"
                onClick={() => {
                  toggleDetails(item.id)
                }}
              >
                {details.includes(item.id) ? 'Hide' : 'Show'}
              </CButton>
            </td>
          )
        },
        details: item => {
          return (
            <CCollapse visible={details.includes(item.id)}>
              <CCardBody>
                <h4>{item.username}</h4>
                <p className="text-muted">User since: {item.registered}</p>
                <CButton size="sm" color="info">
                  User Settings
                </CButton>
                <CButton size="sm" color="danger" className="ml-1">
                  Delete
                </CButton>
              </CCardBody>
            </CCollapse>
          )
        },
      }}
    />
  )
}

API

PropsTypeDefault values
activePagenumber OR undefined1
classNamestring or undefined
clickableRowsboolean
columnFilterValueColumnFilterValueundefined
footerbooleanundefined
headerbooleanundefined
itemsPerPagenumber
itemsPerPageLabelstring10
itemsPerPageOptionsnumber[][5, 10, 20, 50]
loadingboolean
noItemsLabelReactNode
onActivePageChange((value: number) => void)
onColumnFilterChange((value: ColumnFilterValue) => void)
onFilteredItemsChange((items: Item[]) => void)
onItemsPerPageChange((value: number) => void)
onRowClick((item: Item, index: number, columnName: string, event: boolean => void)
onSorterChange((value: SorterValue) => void)
onTableFilterChange((value?: stringundefined) => void)
paginationboolean
tableFilterLabelstring
tableFilterPlaceholderstring
tableFilterValuestring

Contributors

Super Responsive Data table Tables are made possible by these great community members:

Contributing

Please help turn the tables on unresponsive data! Submit an issue and/or make a pull request. Check the projects board for tasks to do.

License

Licensed under the MIT license.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100