Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/likethemammal/overwatch-table
A React component modeling the Overwatch custom game table element
https://github.com/likethemammal/overwatch-table
game-ui overwatch overwatch-table react-component
Last synced: 4 months ago
JSON representation
A React component modeling the Overwatch custom game table element
- Host: GitHub
- URL: https://github.com/likethemammal/overwatch-table
- Owner: likethemammal
- License: apache-2.0
- Created: 2018-03-29T05:25:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-18T20:25:36.000Z (over 6 years ago)
- Last Synced: 2024-10-09T16:21:01.761Z (4 months ago)
- Topics: game-ui, overwatch, overwatch-table, react-component
- Language: JavaScript
- Size: 4.42 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-overwatch - overwatch-table - A React component modeling the Overwatch custom game table element. (Community / Github)
README
overwatch-table
=========
[](https://travis-ci.org/likethemammal/overwatch-table)
[](https://coveralls.io/github/likethemammal/overwatch-table?branch=master)
[](https://www.npmjs.com/package/overwatch-table)
[](https://www.npmjs.com/package/overwatch-table)
[](https://github.com/likethemammal/overwatch-table/blob/master/LICENSE)
A React component modeling the Overwatch Custom Game table element
## Install
Note: Requires **React 16.2+**
npm install --save overwatch-table
### Fonts
#### Futura No 2 D DemiBold
This font is used by Activision Blizzard for much of Overwatch's design. For this component **to match the Overwatch design, including the font is required**. It can be licensed from [MyFonts](http://www.myfonts.com/fonts/urw/futura-no-2/futura-no2-d-demi-bold/).
When using CSS font-face, the font-family should match whats below:
font-family: 'Futura No 2 D DemiBold';
## Usage
Check out [example/index.js](example/index.js) for working example or below for exact usage.
import Table from 'overwatch-table'
const rows = [
{
name: 'Genji',
weapon_type: 'Shuriken',
},
{
name: 'Winston',
weapon_type: 'Banana peel',
},
{
name: 'Symmetra',
weapon_type: 'Long-range beam'
},
{
name: 'Torb',
weapon_type: 'Too many children',
},
]
const columnLabels = {
name: 'Hero Name',
weapon_type: 'Weapon Type'
}
const columnOrder = [
'name',
'weapon_type',
]
class Example extends React.Component {
render() {
return
}
}
### Props
| name | required | type | default | desc
--- |--- | --- | --- | --- |
| columnLabels | **`X`** | object | null | Object of keys matching the keys of each item in `rows`, where the key's value is the label for that column in the Table. |
| columnOrder | **`X`** | array | null | Array of strings, matching the keys of each item in `rows`, in the desired order for the columns. |
| rows | **`X`** | array | null | Array of objects, with keys matching columnLabels and values that will be displayed in the Table cells. |
## Development
npm run dev
#### Running the example
Install it:
cd example/; npm install
Run it while developing (in another terminal window):
cd example/; npm run dev
Open [http://localhost:8080/](http://localhost:8080/) to see the running example
## Tests
npm test
### License
Made with 🍊 by [Chris Dolphin](https://github.com/likethemammal)
[](https://github.com/likethemammal/overwatch-table/blob/master/LICENSE)
#### Fonts
The font **Futura No 2 D DemiBold** should be licensed through [MyFonts.com](http://www.myfonts.com/fonts/urw/futura-no-2/futura-no2-d-demi-bold/)
### Related
- [awesome-overwatch](https://github.com/likethemammal/awesome-overwatch) - A curated list of official Overwatch links and community github repos, codepen demos, and chrome extensions.
- [overwatch-settings-select](https://github.com/likethemammal/overwatch-settings-select) - A React component modeling the Overwatch Settings select element.
- [overwatch-settings-stepper](https://github.com/likethemammal/overwatch-settings-stepper) - A React component modeling the Overwatch Settings the stepper and toggle UI elements.
- [overwatch-side-nav](https://github.com/likethemammal/overwatch-side-nav) - A React component modeling the Official Overwatch website side-navigation.
- [dva-heart-emote](https://github.com/likethemammal/dva-heart-emote) - A WebGL remake of the heart container animation from D.Va's emote.