MUI Tables for Beer Garden
Last updated 4 months ago by loganasherjones .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @loganasherjones/beer-table 
SYNC missed versions from official npm registry.

Beer Table

dependencies Status peerDependencies Status Build Status Coverage Status NPM Status

Beer Table is a simple Material-UI table wrapper for server and client side:

  • filtering
  • sorting
  • pagination

NOTE: This package is currently in alpha and is subject to aggressive API changes.


npm install @loganasherjones/beer-table --save


TODO: once this is deployed, add a link to CodeSandbox


For a simple table:

import BeerTable from 'beer-table';

const columns = [
    { name: 'Name', id: 'name' },
    { name: 'Age', id: 'age' },

const data = [
    { name: 'Alice', age: 28},
    { name: 'Bob', age: 30},
    { name: 'Charles', age: 21},

<BeerTable columns={columns} data={data} />

For a more advanced use-case, checkout the examples.


WARNING: The API is likely to change until I am out of alpha. You have been warned.

<BeerTable />

Name Type Required Description
data array true Data to display, must be an array of objects.
columns array true Column description. Must be an array of objects. See the columns below fore more information.
loading boolean false Used to display a spinner while data is loading.
totalCount number false Used to indicate the total number of rows, default is the data.length
filterCount number false Used if filtering happens server-side. Indicates # of rows after filtering.
pagination object false Used if pagination happens server-side. See info below.


The columns help you customize a column's behavior. Options:

Name Type Required Default Description
name string true N/A Name of the column
id string false col.name Identifies a column, also used as the accessor in data
formatter func false null Format a value before it is displayed.
filterValue string false null Set a filter value by default.
customSort func false null Used to customize the way sorting works.
sortDirection string false null Sort direction for this column. Only options are: desc or asc
disableSort boolean false false Disable sorting for this column.
defaultSortDirection string false desc On the first click to sort, which direction to sort.
customMatch func false defaultMatch A match function to use for filtering. See defaultMatch
filterEnum array false null A list of possible values for the filter.
disableFilter boolean false false Disable filtering on this column.
datetime boolean false false Determine if type of value is datetime.


The pagination can be used to customize the pagination displays.

Name Type Required Default Description
currentPageNum number false 0 What page number to start from.
rowsPerPageOptions array false [10, 25, 50, 100] How many options for # of rows.
rowsPerPage number false 10 How many rows to show by default. Should be a member of rowsPerPageOptions


The files included in this repository are licensed under the MIT license

Road to Beta

I plan on getting all the following working before I make the API more stable.

Feature Client Server Mobile
Filtering :heavy_check_mark: :x: :x:
Sorting :heavy_check_mark: :x: :x:
Pagination :heavy_check_mark: :x: :x:
Loading :heavy_check_mark: :heavy_check_mark: :x:
Error :heavy_check_mark: :heavy_check_mark: :x:
Empty :heavy_check_mark: :heavy_check_mark: :x:
Column Width :x: :x: :x:

Current Tags

  • 0.1.1-alpha1                                ...           latest (4 months ago)

2 Versions

  • 0.1.1-alpha1                                ...           4 months ago
  • 0.1.0                                ...           4 months ago
Maintainers (1)
Today 0
This Week 0
This Month 4
Last Day 0
Last Week 4
Last Month 0
Dependencies (2)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |