Beer Table

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.

Install

npm install @loganasherjones/beer-table --save

Demo

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

Usage

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.

API

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.

columns

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.

pagination

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

License

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: