rex-table v1.2.0
ReX React UI Components Library
ReX React UI Component: rex-table
This project is part of ReX Design Language and it can be used to create React UI Components.
For more information visit:
Github
https://github.com/rakuten-rex
NPM
https://www.npmjs.com/org/rakuten-rex
How it was built
- Build tool: webpack 4
- Codebase: Fork of Bootstrap project + ReX custom styles
- Css engine: Sass
- JavaScript component: React
How to install
npm install rex-table@1.2.0 --save
What you can do
Use tables for homogenous data sets. Tables are good for organizing data and/or for easy side-by-side comparison.
To be suitable for a table, your data needs to have at least two rows and two columns. If you have only one column or one row, use a list instead.
Different styles are included in this component such as Basic, Striped, Bordered, Borderless, Condensed, Responsive and Contextual clasees.
Live examples
For a complete guide of properties for React and HTML classes please visit the Storybook site:
https://rakuten-rex.github.io/rex-table/
JavaScript modules
React component (JavaScript + CSS Styles)
For plug and play components integration.
Example:
import 'rex-core'; // ReX Core dependency
import Table from 'rex-table';
function MyComponent() {
return (
<Table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Taro</td>
<td>Rakuten</td>
<td>@supertaro</td>
</tr>
</tbody>
</Table>
);
}
CSS Styles only
For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.
Example:
import 'rex-core/css'; // ReX Core dependency
import 'rex-table/css';
function MyComponent() {
return (
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Taro</td>
<td>Rakuten</td>
<td>@supertaro</td>
</tr>
</tbody>
</table>
);
}
Static HTML
Add it from our CDN into your HTML template or HTML static page.
For development mode:
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.development.css" rel="stylesheet">
<!-- rex-table -->
<link href="https://r.r10s.jp/com/rex/rex-table/1.2.0/rex-table.development.css" rel="stylesheet">
For production mode:
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.production.min.css" rel="stylesheet">
<!-- rex-table -->
<link href="https://r.r10s.jp/com/rex/rex-table/1.2.0/rex-table.production.min.css" rel="stylesheet">
Example:
<div class="rex-css-style my-component">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Taro</td>
<td>Rakuten</td>
<td>@supertaro</td>
</tr>
</tbody>
</table>
</div>
Javascript and React related documents
Take a look to this nice documentation pages to be more familiar with React and modern Javascript:
Official site
https://reactjs.org/docs/getting-started.html
Google Web Fundamentals (the whole site is a must to read)
https://developers.google.com/web/fundamentals/
Webpack as magic bundler
Composing Software series (how to understand Funcional Programming)
https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea
Common React patterns
Understanding Storybook with nice images
https://blog.hichroma.com/the-delightful-storybook-workflow-b322b76fd07