m2mui-datasheet v4.1.0

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}
    />
)