@teppen/react-ui 0.3.0 → 0.5.0

package/README.md

@@ -47,7 +47,7 @@ module.exports = {
 
 To use this library, you need to import the components you want to use and render them in your React application.
 
-For example, to use the Button component, you can do something like this:
+For example, to use the Table component, you can do something like this:
 
 ```tsx
 import React from "react";
@@ -58,14 +58,29 @@ const App = () => {
     <div>
       <Table
         rows={[
-          { id: "1", name: "Taro" },
-          { id: "2", name: "Yoshiko" },
-          { id: "3", name: "Koki" },
-          { id: "4", name: "Chisato" },
+          { id: "1", name: "Taro", age: 30 },
+          { id: "2", name: "Yoshiko", age: 60 },
+          { id: "3", name: "Koki", age: 13 },
+          { id: "4", name: "Chisato", age: 34 },
         ]}
         cols={[
-          { key: "id", label: "ID" },
-          { key: "name", label: "名前" },
+          { key: "id", label: "ID", type: "number" },
+          {
+            key: "name",
+            label: "名前",
+            type: "string",
+            editable: true,
+            constraints: {
+              maxLength: 10,
+              minLength: 1,
+              pattern: "^[a-zA-Z0-9]+$",
+            },
+            onCellBlur: (key, value, current, completeEditing) => {
+              console.log(key, value, current);
+              completeEditing();
+            },
+          },
+          { key: "age", label: "年齢", type: "number" },
         ]}
       />
     </div>
@@ -75,6 +90,59 @@ const App = () => {
 export default App;
 ```
 
+### Table Component
+
+A component that displays a table based on the row and column information passed as arguments. The table component has the following features:
+
+- Pagination function
+- Filtering function (only when `label` and `type` are set in the column information)
+- Sorting function (only when `label` and `type` are set in the column information)
+- Editing function (only when `editable` is true and `onCellBlur` is set in the column information)
+
+#### Arguments
+
+The table component only accepts the arguments `rows` and `cols`. Details for each argument are described below.
+
+##### rows
+
+`rows` is an array of the following associative array (`DataObject`). Only id is required and it must be unique within the array. If onClick is set, it is possible to define the behavior when a row is clicked.
+
+```ts
+export type DataObject = {
+  [key: string]: any;
+  id: number | string;
+  onClick?: React.MouseEventHandler<HTMLTableRowElement>;
+};
+```
+
+##### cols
+
+In `cols`, you specify the data to be displayed in the table from left to right. The `key` here needs to match the key name in each element of rows. However, it is not necessary to always include the key `id`. `label` is optional, but it is required for some functions, so it is recommended to set it.
+
+```ts
+export type TColumnType = "string" | "number";
+
+export type TTableColumn = {
+  key: string;
+  type: TColumnType;
+  label?: string;
+  editable?: boolean;
+  constraints?: {
+    maxLength?: number; // Only when "type" is "string"
+    minLength?: number; // Only when "type" is "string"
+    pattern?: string; // Only when "type" is "string"
+    max?: number; // Only when "type" is "number"
+    min?: number; // Only when "type" is "number"
+  };
+  onCellBlur?: (
+    key: string,
+    value: number | string, // Value in cell after change
+    current: DataObject, // Row data before change
+    completeEditing: () => void // Function to exit cell edit mode
+  ) => void;
+};
+```
+
 ## License
 
 This library is licensed under MIT license. See LICENSE file for more information.

package/dist/cjs/node_modules/react-icons/lia/index.js

@@ -0,0 +1,2 @@
+"use strict";var L=require("../lib/iconBase.js");require("../lib/iconContext.js"),exports.LiaEdit=function(t){return L.GenIcon({tag:"svg",attr:{viewBox:"0 0 32 32"},child:[{tag:"path",attr:{d:"M 25 4.03125 C 24.234375 4.03125 23.484375 4.328125 22.90625 4.90625 L 13 14.78125 L 12.78125 15 L 12.71875 15.3125 L 12.03125 18.8125 L 11.71875 20.28125 L 13.1875 19.96875 L 16.6875 19.28125 L 17 19.21875 L 17.21875 19 L 27.09375 9.09375 C 28.246094 7.941406 28.246094 6.058594 27.09375 4.90625 C 26.515625 4.328125 25.765625 4.03125 25 4.03125 Z M 25 5.96875 C 25.234375 5.96875 25.464844 6.089844 25.6875 6.3125 C 26.132813 6.757813 26.132813 7.242188 25.6875 7.6875 L 16 17.375 L 14.28125 17.71875 L 14.625 16 L 24.3125 6.3125 C 24.535156 6.089844 24.765625 5.96875 25 5.96875 Z M 4 8 L 4 28 L 24 28 L 24 14.8125 L 22 16.8125 L 22 26 L 6 26 L 6 10 L 15.1875 10 L 17.1875 8 Z"},child:[]}]})(t)};
+//# sourceMappingURL=index.js.map