# rex-table

> ReX React UI Component

Latest version **1.2.0** (published 2019-04-23) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install rex-table
pnpm add rex-table
yarn add rex-table
bun add rex-table
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-04-23 |
| First published | 2019-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6 |
| Dependencies | 0 |
| Unpacked size | 56.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rex Project Authors |
| Maintainers | claudio.moya-rakuten.com, montomos, shugo.saito-rakuten.com |
| Keywords | css, sass, mobile-first, responsive, front-end, framework, web, react, ui-components |

## Links

- npm: https://www.npmjs.com/package/rex-table
- Repository: https://github.com/rakuten-rex/rex-table
- Homepage: https://rakuten-rex.github.io/rex-table/
- Issues: https://github.com/rakuten-rex/rex-table/issues
- npm.io page: https://npm.io/package/rex-table

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2019-04-23
- 0.1.0 — 2019-02-18

## README

# 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
1. Codebase: Fork of Bootstrap project + ReX custom styles
1. Css engine: Sass
1. 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: 

```js
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: 

```js
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:

```markdown
<!-- 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:

```markdown
<!-- 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: 

```markdown
<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/

---
_Source: https://npm.io/package/rex-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._