Data Table - Classic

Lightweight and extensible data tables for React.

Check out more at Project's website.

How easy is it to use React-Table? Take a peek at the code below!

import DataTable from "../components/DataTable"

export default function page(props) {

  // State for columns to hide
  const [hiddenColumns, setHiddenColumns] = useState([])

  // Viewport size hook
  const viewportSize = useWindowSize()

  // useEffect hook to dynamically hide columns on small screens
  useEffect(() => {
    if (viewportSize.width < 600) {
      setHiddenColumns(["city", "orders", "phone", "email"])
    } else if (viewportSize.width < 900) {
      setHiddenColumns(["city", "orders"])
    } else {
      setHiddenColumns([])
    }
  }, [viewportSize.width])


  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        accessor: "person",
      },
      {
        Header: "Company",
        accessor: "company",
      },
      {
        Header: "Email",
        accessor: "email",
      },
      {
        Header: "Phone",
        accessor: "phone",
      },
      {
        Header: "City",
        accessor: "city",
      },
      {
        Header: "Orders",
        accessor: "orders",
      },
    ],
    []
  )

  return(
    <DataTable 

      // data prop 
      items={data} 

      // columns prop
      columns={columns} 

      // set page size - default is 5
      defaultPageSize={10} 

      // pass hiddenColumns state if you use it
      hiddenColumns={hiddenColumns} 
    />
  )
}

Entries per page
NameCompanyEmailPhoneCityOrders
Kelley CareyTetakkelleycarey@tetak.com+1 (888) 443-3225Sharon3
Head DorseyEargoheaddorsey@eargo.com+1 (879) 516-3454Robinson2
Best SantiagoPivitolbestsantiago@pivitol.com+1 (817) 553-3556Yonah8
Ann FarleyAtomicaannfarley@atomica.com+1 (929) 553-3590Belfair6
Bettie AcevedoUnibettieacevedo@uni.com+1 (893) 443-2816Silkworth9
Ola FrazierFuturisolafrazier@futuris.com+1 (969) 479-2251Retsof4
Valarie McleanGallaxiavalariemclean@gallaxia.com+1 (939) 481-2070Blanford3
Wendy JonesOrbinwendyjones@orbin.com+1 (876) 529-3769Sterling2
Beth OrtegaOrbaxterbethortega@orbaxter.com+1 (883) 505-3545Hollins4
Watts RiversDentrexwattsrivers@dentrex.com+1 (998) 424-3302Avalon1
Showing page 1 of 10

Data Table - Card Table

Entries per page
NameCompanyEmailPhoneCityOrders
Kelley CareyTetakkelleycarey@tetak.com+1 (888) 443-3225Sharon3
Head DorseyEargoheaddorsey@eargo.com+1 (879) 516-3454Robinson2
Best SantiagoPivitolbestsantiago@pivitol.com+1 (817) 553-3556Yonah8
Ann FarleyAtomicaannfarley@atomica.com+1 (929) 553-3590Belfair6
Bettie AcevedoUnibettieacevedo@uni.com+1 (893) 443-2816Silkworth9
Ola FrazierFuturisolafrazier@futuris.com+1 (969) 479-2251Retsof4
Valarie McleanGallaxiavalariemclean@gallaxia.com+1 (939) 481-2070Blanford3
Wendy JonesOrbinwendyjones@orbin.com+1 (876) 529-3769Sterling2
Beth OrtegaOrbaxterbethortega@orbaxter.com+1 (883) 505-3545Hollins4
Watts RiversDentrexwattsrivers@dentrex.com+1 (998) 424-3302Avalon1
Showing page 1 of 10

Your company © 2023

Version 1.3.0