Add the Table component.

Author: macroing

README.md

@@ -33,6 +33,7 @@ The components in this library will be described below.
 - [Pagination](https://github.com/macroing/simple-react-components/tree/master/documentation/pagination) provides a component that defines a pagination.
 - [Select](https://github.com/macroing/simple-react-components/tree/master/documentation/select) provides a component that defines a select.
 - [TabPane](https://github.com/macroing/simple-react-components/tree/master/documentation/tab-pane) provides a component that defines a tab pane.
+- [Table](https://github.com/macroing/simple-react-components/tree/master/documentation/table) provides a component that defines a table.
 - [TextArea](https://github.com/macroing/simple-react-components/tree/master/documentation/text-area) provides a component that defines a text area.
 
 ## Font Awesome

dist/index/index.js

@@ -0,0 +1 @@
+import e from"./Table.module.css.js";import{jsx as l}from"react/jsx-runtime";function t(t){let{children:r,styles:s,...a}=t;return null==s&&(s=e),l("table",{className:s.table,...a,children:r})}export{t as default};

dist/index/src/Table.js

@@ -0,0 +1 @@
+# `Table`

dist/index/src/Table.module.css.js

@@ -13,6 +13,7 @@ import OptionList from "./src/OptionList";
 import Pagination from "./src/Pagination";
 import Select from "./src/Select";
 import TabPane from "./src/TabPane";
+import Table from "./src/Table";
 import TextArea from "./src/TextArea";
 
-export { Button, DesktopMenuBar, Dialog, Footer, Form, ImageViewer, Input, Jumbotron, LinkButton, MenuBar, MobileMenuBar, OptionList, Pagination, Select, TabPane, TextArea };
+export { Button, DesktopMenuBar, Dialog, Footer, Form, ImageViewer, Input, Jumbotron, LinkButton, MenuBar, MobileMenuBar, OptionList, Pagination, Select, TabPane, Table, TextArea };

documentation/table/README.md

@@ -0,0 +1,16 @@
+import importedStyles from "./Table.module.css";
+
+export default function Table(props) {
+  let { children, styles, ...rest } = props;
+
+  //If no styles property has been assigned, the imported CSS module will be used for styling.
+  if (styles === null || styles === undefined) {
+    styles = importedStyles;
+  }
+
+  return (
+    <table className={styles.table} {...rest}>
+      {children}
+    </table>
+  );
+}

index.js

@@ -0,0 +1,105 @@
+.table {
+  --src-table-background-color: #f6f6f6;
+  --src-table-background-color-even: #f6f6f6;
+  --src-table-background-color-odd: #ffffff;
+  --src-table-border-color: #dddddd;
+  --src-table-color: #333333;
+
+  border: 1px solid var(--src-table-border-color);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.12);
+  table-layout: fixed;
+  width: 100%;
+}
+
+.table > tbody {
+  border: 1px solid var(--src-table-border-color);
+}
+
+.table > tbody > tr {
+  background: linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
+  border-bottom: 1px solid var(--src-table-border-color);
+  border-top: 1px solid var(--src-table-border-color);
+}
+
+.table > tbody > tr:first-child {
+  border-top: none;
+}
+
+.table > tbody > tr:last-child {
+  border-bottom: none;
+}
+
+.table > tbody > tr:nth-child(even) {
+  background-color: var(--src-table-background-color-even);
+}
+
+.table > tbody > tr:nth-child(odd) {
+  background-color: var(--src-table-background-color-odd);
+}
+
+.table > tbody > tr > td {
+  border-left: 1px solid var(--src-table-border-color);
+  border-right: 1px solid var(--src-table-border-color);
+  color: var(--src-table-color);
+  overflow: hidden;
+  padding: 5px 10px 5px 10px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table > tbody > tr > td:first-child {
+  border-left: none;
+}
+
+.table > tbody > tr > td:last-child {
+  border-right: none;
+}
+
+.table > tbody > tr > th {
+  border-left: 1px solid var(--src-table-border-color);
+  border-right: 1px solid var(--src-table-border-color);
+  overflow: hidden;
+  padding: 5px 10px 5px 10px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table > tbody > tr > th:first-child {
+  border-left: none;
+}
+
+.table > tbody > tr > th:last-child {
+  border-right: none;
+}
+
+.table > thead {
+  background-color: var(--src-table-background-color);
+  border: 1px solid var(--src-table-border-color);
+}
+
+.table > thead > tr {
+  background: linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
+}
+
+.table > thead > tr > th {
+  border-left: 1px solid var(--src-table-border-color);
+  border-right: 1px solid var(--src-table-border-color);
+  color: var(--src-table-color);
+  overflow: hidden;
+  padding: 5px 10px 5px 10px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.table > thead > tr > th:first-child {
+  border-left: none;
+}
+
+.table > thead > tr > th:last-child {
+  border-right: none;
+}