This package has been deprecated

Author message:

This project has been deprecated and is not longer supported

rex-table

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

1. Build tool: webpack 4
2. Codebase: Fork of Bootstrap project + ReX custom styles
3. Css engine: Sass
4. 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

https://webpack.js.org/

Composing Software series (how to understand Funcional Programming)

https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea

Common React patterns

https://reactpatterns.com

Understanding Storybook with nice images

https://blog.hichroma.com/the-delightful-storybook-workflow-b322b76fd07

Some guidelines for clean code

https://americanexpress.io/clean-code-dirty-code/