m2mui-datasheet v4.0.1
M2MUI Data Sheets
const [data, setData] = useState(defaultData)
return (
<DataSheet
columns={[
{
key: "check",
Header: "Check",
type: "checkbox",
validator: ({ row }) => {
return !isBoolean(row.check)
}
},
{
key: "name",
Header: "Name"
},
{
key: "status",
Header: "Status",
type: "select",
list: ["pending", "approved", "request change"]
},
{
key: "prefecture",
Header: "Prefecture",
type: "select",
list: prefectures
},
{
key: "city",
Header: "City",
type: "select",
list: ({ row }) => {
return getCities(row.prefecture)
},
validator: ({ row }) => {
return (
!hasCity(row.prefecture, row.city) &&
"都道府県に対応していません"
)
}
},
{
key: "code",
readonly: true,
Header: "Code"
},
{
key: "fee",
Header: "Fee",
type: "number",
formatter: (Header) => {
return toLocaleCurrency(Header)
}
},
{
key: "start",
Header: "Start",
type: "date",
validator: ({ row }) => {
return (
isAfter(row.start, row.end) &&
"開始日が終了日以降になっています"
)
}
},
{
key: "end",
Header: "End",
type: "date"
}
]}
data={data}
onChange={setData}
/>
)
2 days ago
10 days ago
8 days ago
10 days ago
10 days ago
17 days ago
24 days ago
24 days ago
28 days ago
1 month ago
29 days ago
30 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago