This is a React component library that provides some useful UI elements for your web applications.
This library includes the following components:
- Table: A simple Table. (1.0.0 ~) (※ Not compatible with 0.*.*)
You can install this library using npm or yarn.
npm i @teppen/react-ui
This library has the following peer dependencies:
- react
- react-dom
Please follow the installation procedure described in the following tailwindcss website.
To use the React-UI library, add a content
in tailwind.config.js
to "./node_modules/@teppen/react-ui/dist/**/*.js"
.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"<The path where you are placing the component files>",
"./node_modules/@teppen/react-ui/dist/**/*.js",
],
theme: {
extend: {},
},
plugins: [],
};
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 Table component, you can do something like this:
import React from "react";
import { Table } from "@teppen/react-ui";
const App = () => {
return (
<div>
<Table
rows={[
{
id: 1,
name: "Taro",
age: 30,
role: "",
button: "Click",
},
{
id: 2,
name: "Yoshiko",
age: 60,
role: "1",
button: "Click",
},
{
id: 3,
name: "Koki",
age: 13,
role: "2",
button: "Click",
},
{
id: 4,
name: "Chisato",
age: 34,
role: "2",
button: "Click",
},
]}
cols={[
{ 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" },
{
key: "role",
label: "役割",
type: "select",
editable: true,
options: [
{ value: "1", label: "管理者" },
{ value: "2", label: "オペレーター" },
],
allowEmpty: true,
onCellBlur: (key, value, current, completeEditing) => {
console.log(key, value, current);
completeEditing();
},
},
{
key: "button",
label: "ボタン",
disableSort: true,
disableFilter: true,
type: "string",
render: (value, row) => (
<button
className="px-2 py-1 text-white bg-blue-500 rounded-md"
onClick={(e) => {
e.preventDefault();
alert(`Clicked button: (id: ${row.id})`);
}}
>
{value}
</button>
),
},
]}
initialCondition={{
sort: {
key: "id",
asc: true,
},
}}
onClickRow={(row) => {
alert(`Clicked row: (id: ${row.id})`);
}}
applyRowFormatting={(row) => {
if (row.role === "1") {
return "bg-red-600 text-white";
} else {
return "";
}
}}
checkbox={{
checked: (row) => row.id % 2 == 1,
onChecked: (row) => console.log("checked", row.id),
onUnchecked: (row) => console.log("unchecked", row.id),
}}
/>
</div>
);
};
export default App;
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
- Sorting function
- Filtering function (only when
label
is set in the column information) - Editing function (only when
editable
is true andonCellBlur
is set in the column information) - Checkbox function
The table component only accepts the arguments rows
, cols
, initialCondition
and onClickRow
. Details for each argument are described below.
rows
is an array of the following associative array (DataObject
). Only id is required and it must be unique within the array.
export type DataObject = {
[key: string]: number | string;
id: number | string;
};
※ onClick
property has been deprecated since version 1.0.0 in favor of the new Table argument onClickRow
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.
it is not necessary to always include the key label
, but it is required for some functions, so it is recommended to set it.
export type TColumnType = "string" | "number" | "select";
export type TTableColumn = {
key: string;
label?: string;
type: TColumnType;
disableSort?: boolean;
disableFilter?: boolean;
options: { value: string; label: string }[]; // Only When "type" is "select"
editable?: boolean;
render?: (value: string | number, row: DataObject) => React.ReactNode; // Only When "editable" is false
allowEmpty?: boolean; // Only When "type" is "select"
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;
};
※ TColumnType no longer supports component
since version 1.0.0. Instead, render
is now supported, allowing for sorting and filtering functions that were not previously supported by component
.
In initialCondition
, you can set initial values for each function. This is optional.
type TInitialCondition = {
sort?: { key: string; asc?: boolean };
};
In onClickRow
, you may define the behavior when a row is clicked. This is optional.
type TOnClickRow = (row: DataObject) => void;
In applyRowFormatting
, depending on the status of each row, you can define the format of the row using TailwindCSS classes. In principle, TailwindCSS classes other than background and text color are not guaranteed to work, but any class can be specified.
/**
* The return value is a string of one TailwindCSS class or multiple TailwindCSS classes separated by spaces.
*/
type TApplyRowFormatting = (row: DataObject) => string;
In checkbox
, you can easily place a checkbox at the left edge of the table. If checkbox
is not defined, no checkbox will appear at the left edge.
When defining a checkbox
, the following three properties must be set.
- checked: Function to determine if a checkbox is checked or not
- onChecked: Function to define the behavior when a checkbox is checked
- onUnchecked: Function to define the behavior when a checkbox is unchecked
type TCheckbox = {
checked: (row: DataObject) => boolean;
onChecked: (row: DataObject) => void;
onUnchecked: (row: DataObject) => void;
};
This library is licensed under MIT license. See LICENSE file for more information.