@teppen/react-ui 0.4.0 → 0.5.1

package/README.md

@@ -64,9 +64,23 @@ const App = () => {
           { id: "4", name: "Chisato", age: 34 },
         ]}
         cols={[
-          { key: "id", label: "ID", type: "数値" },
-          { key: "name", label: "名前", type: "文字列" },
-          { key: "age", label: "年齢", type: "数値" },
+          { 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>
@@ -83,6 +97,7 @@ A component that displays a table based on the row and column information passed
 - 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
 
@@ -102,18 +117,32 @@ export type DataObject = {
 
 ##### 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` and `type` are optional, but they are required for some functions, so it is recommended to set them.
+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; label?: string; type?: TColumnType };
+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