npm - matsuri-ui - Versions diffs - 17.0.2-alpha-1750051925500-43a75f0.0 → 17.1.0 - Mend

matsuri-ui 17.0.2-alpha-1750051925500-43a75f0.0 → 17.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/esm/TableUI/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["Checkbox","ListItem","ListItemIcon","MenuList","Popper","WithPagination","css","resetButtonStyle","useCallback","useState","useGridLayout","useSort","useTheme","ArrowDownwardIcon","ArrowUpwardIcon","React","jsx","___EmotionJSX","DefaultRenderCell","props","cell","value","JSON","stringify","tableCellStyle","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","_ref4","HeaderCell","theme","anchorEl","setAnchorEl","handleClose","undefined","handleToggle","event","currentTarget","prev","open","Boolean","palette","gray","onClick","children","disablePortal","onClickOutside","placement","paperProps","elevation","menuItems","map","_ref5","label","renderIcon","Icon","key","_ref","_ref2","_ref3","TableUI","columns","data","striped","stickyHeader","onSelect","selectedIndex","onSelectAll","renderActions","RenderActions","onPaginate","pageTotal","allChecked","length","dataSorted","order","setOrder","gridStyle","typography","body","zIndex","appBar","defaultChecked","onChange","checked","target","indeterminate","column","orderBy","by","direction","title","text","hint","_ref6","row","index","includes","intentions","primary","light","renderCell","RenderCell"],"sources":["../../../src/TableUI/index.tsx"],"sourcesContent":["import { Checkbox } from \"../Checkbox\";\nimport { ListItem, ListItemIcon } from \"../List\";\nimport { MenuList } from \"../Menu\";\nimport { Popper } from \"../Popper\";\nimport { WithPagination, WithPaginationProps } from \"./WithPagination\";\nimport { css } from \"@emotion/react\";\nimport { resetButtonStyle } from \"../Button\";\nimport { useCallback, useState } from \"react\";\nimport { useGridLayout } from \"./useGridLayout\";\nimport { useSort } from \"./useSort\";\nimport { useTheme } from \"../theme\";\nimport ArrowDownwardIcon from \"@mui/icons-material/ArrowDownward\";\nimport ArrowUpwardIcon from \"@mui/icons-material/ArrowUpward\";\nimport React from \"react\";\n\nexport interface TableUIRenderCellProps<Row, Value> {\n cell: { value: Value };\n row: Row;\n}\n\nconst DefaultRenderCell = (\n props: TableUIRenderCellProps<Record<string, unknown>, unknown>,\n) => {\n const { cell } = props;\n return (\n <div>\n {typeof cell.value === \"string\" ? cell.value : JSON.stringify(cell.value)}\n </div>\n );\n};\n\nconst tableCellStyle = css`\n box-sizing: border-box;\n padding: 8px 16px;\n font: inherit;\n line-height: inherit;\n text-align: left;\n letter-spacing: inherit;\n background-color: white;\n border-bottom: 1px solid #e0e0e0;\n &:first-of-type:has(input[type=\"checkbox\"]) {\n padding: 0px;\n label {\n display: flex;\n padding: 8px;\n }\n }\n`;\n\ninterface HeaderCellProps extends React.PropsWithChildren {\n menuItems: {\n label: string;\n onClick: () => void;\n renderIcon: (props: Record<string, unknown>) => React.JSX.Element;\n }[];\n}\n\nconst HeaderCell = (props: HeaderCellProps) => {\n const theme = useTheme();\n const [anchorEl, setAnchorEl] = useState<HTMLElement>();\n const handleClose = useCallback(() => {\n setAnchorEl(undefined);\n }, []);\n const handleToggle = useCallback(\n (event: React.SyntheticEvent<HTMLElement>) => {\n const { currentTarget } = event;\n setAnchorEl((prev) => (prev ? undefined : currentTarget));\n },\n [],\n );\n const open = Boolean(anchorEl);\n\n return (\n <th\n css={[\n tableCellStyle,\n css`\n padding: 0px;\n cursor: pointer;\n transition: background-color 0.1s ease-in-out;\n &:hover {\n background-color: ${theme.palette.gray[200]};\n }\n `,\n ]}\n >\n <button\n css={[\n resetButtonStyle,\n css`\n display: inline-block;\n width: 100%;\n padding: 8px 16px;\n text-align: inherit;\n `,\n ]}\n onClick={handleToggle}\n >\n {props.children}\n </button>\n <Popper\n disablePortal\n onClickOutside={handleClose}\n anchorEl={anchorEl}\n open={open}\n placement=\"bottom-start\"\n >\n <MenuList\n paperProps={{\n elevation: 5,\n }}\n >\n {props.menuItems.map(({ onClick, label, renderIcon: Icon }) => {\n return (\n <ListItem\n key={label}\n onClick={() => {\n onClick();\n handleClose();\n }}\n >\n <ListItemIcon>\n <Icon />\n </ListItemIcon>\n {label}\n </ListItem>\n );\n })}\n </MenuList>\n </Popper>\n </th>\n );\n};\n\nexport type TableUIColumn<Row> = {\n [Key in keyof Row]: {\n // このキーのユニークチェックを行った方が良い。\n // 出来ればランタイムは無駄が大きいので型でチェックしたい。\n key: Key;\n title?: string;\n renderCell?: ({\n cell,\n row,\n }: TableUIRenderCellProps<Row, Row[Key]>) => React.JSX.Element;\n // デフォルトでソートは有効化する\n sort?: (a: Row[Key], b: Row[Key]) => number;\n /*\n この列の幅が全体に占める比を指定する。\n * columnRatio指定しない場合は、autoが指定されたものとして扱われます。\n * table要素本来の自動調整が効かなくなるので、注意して利用してください。\n /\n columnRatio?: number;\n };\n}[keyof Row];\n\nexport interface TableUIPropsOnSelectArgs<Row> {\n row: Row;\n index: number;\n checked: boolean;\n}\n\nexport interface TableUIPropsRenderActionsArgs<Row> {\n row: Row;\n index: number;\n}\n\nexport interface TableUIProps<Row> extends WithPaginationProps {\n /\n テーブルをストライプ柄にするかどうか\n * @default false\n /\n striped?: boolean;\n /\n テーブルのヘッダーを固定するかどうか\n * @default false\n /\n stickyHeader?: boolean;\n /\n テーブルの列の情報\n /\n columns?: TableUIColumn<Row>[];\n /\n 空配列の場合は読み込み済み、undefinedの場合は読み込み中であると見なされます。\n * 基本的にJSONフレンドリーなオブジェクトを渡すようにしてください。ReactElementなどは非推奨です。\n * 代わりにcolumnsで定義できるrenderCellを利用するか、ReactComponentを渡してください。\n \n dataにはcolumnsに存在しないものも含められます。\n /\n data?: Row[];\n /\n 現在選択されている行のindexの配列\n /\n selectedIndex?: number[];\n /\n 行毎のチェックボックスが生える\n /\n onSelect?: ({ row, index, checked }: TableUIPropsOnSelectArgs<Row>) => void;\n /\n 全てをチェックするボタンが生える\n /\n onSelectAll?: ({ data, checked }: { data: Row[]; checked: boolean }) => void;\n /\n onSelectで生えるチェックボックスのname\n * formDataから取得できる値は選択された行のindexです。\n /\n name?: string;\n /\n 行の末尾にインタラクティブ要素を追加するためのメソッド\n /\n renderActions?: (\n args: TableUIPropsRenderActionsArgs<Row>,\n ) => React.JSX.Element;\n}\n\nexport const TableUI = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Row extends Record<string, any>,\n>(\n props: TableUIProps<Row>,\n) => {\n const {\n columns,\n data,\n striped,\n stickyHeader,\n onSelect,\n selectedIndex = [],\n onSelectAll,\n name,\n renderActions: RenderActions,\n onPaginate,\n pageTotal,\n } = props;\n const theme = useTheme();\n\n const allChecked = data?.length === selectedIndex?.length;\n\n const [dataSorted, order, setOrder] = useSort(columns, data);\n\n const gridStyle = useGridLayout(columns);\n\n return (\n <WithPagination onPaginate={onPaginate} pageTotal={pageTotal}>\n <table\n css={[\n theme.typography.body,\n css`\n box-sizing: border-box;\n width: 100%;\n border-spacing: 0;\n border-collapse: separate;\n isolation: isolate;\n border-top: 1px solid #e0e0e0;\n border-right: 2px solid #e0e0e0;\n border-bottom: 1px solid #e0e0e0;\n border-left: 2px solid #e0e0e0;\n thead {\n box-sizing: border-box;\n th {\n white-space: nowrap;\n border-top: 1px solid #e0e0e0;\n border-bottom: 2px solid #e0e0e0;\n }\n }\n `,\n striped\n ? css`\n tr:nth-of-type(even) > td {\n background-color: #f2f2f2;\n }\n `\n : null,\n stickyHeader\n ? css`\n position: relative;\n /\n ここでtheadをstickyにすると、grid layoutのサポートが困難になる。\n */\n thead tr th {\n position: sticky;\n top: 0px;\n z-index: ${theme.zIndex.appBar};\n }\n `\n : null,\n gridStyle,\n ]}\n >\n <thead>\n <tr>\n {onSelect ? (\n <th css={tableCellStyle}>\n {onSelectAll ? (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n <Checkbox\n defaultChecked={allChecked}\n key={allChecked?.toString()}\n onChange={(event) => {\n if (data) {\n onSelectAll({ data, checked: event.target.checked });\n }\n }}\n indeterminate={selectedIndex.length > 0 && !allChecked}\n />\n </label>\n ) : null}\n </th>\n ) : null}\n {columns?.map((column) => {\n const orderBy = column.key.toString();\n return (\n <HeaderCell\n menuItems={[\n {\n label: \"昇順で並び替え\",\n //@ts-expect-error muiのiconの方がmuiNameプロパティを型で持つようになったためエラーが出る\n renderIcon: ArrowUpwardIcon,\n onClick: () => {\n setOrder({ by: orderBy, direction: \"asc\" });\n },\n },\n {\n label: \"降順で並び替え\",\n //@ts-expect-error muiのiconの方がmuiNameプロパティを型で持つようになったためエラーが出る\n renderIcon: ArrowDownwardIcon,\n onClick: () => {\n setOrder({ by: orderBy, direction: \"desc\" });\n },\n },\n ]}\n key={column.key.toString()}\n >\n <div\n css={css`\n position: relative;\n `}\n >\n {column.title}\n <span\n css={css`\n position: absolute;\n display: inline-flex;\n margin-left: 4px;\n color: ${theme.palette.text.hint};\n `}\n >\n {order?.by === orderBy ? (\n order.direction === \"desc\" ? (\n <ArrowDownwardIcon />\n ) : (\n <ArrowUpwardIcon />\n )\n ) : null}\n </span>\n </div>\n </HeaderCell>\n );\n })}\n {RenderActions ? <th css={tableCellStyle} /> : null}\n </tr>\n </thead>\n <tbody>\n {dataSorted?.map(({ row, index }) => {\n const checked = selectedIndex?.includes(index);\n return (\n <tr\n key={`${index}`}\n css={css`\n &:has(input[type=\"checkbox\"]:checked) > td {\n background-color: ${theme.palette.intentions.primary.light};\n }\n `}\n >\n {onSelect ? (\n <td css={tableCellStyle}>\n {\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n <Checkbox\n key={checked?.toString()}\n name={name}\n value={index}\n defaultChecked={checked}\n onChange={(event) => {\n onSelect({\n row,\n index,\n checked: event.target.checked,\n });\n }}\n />\n </label>\n }\n </td>\n ) : null}\n {columns?.map((column) => {\n const cell = row[column.key];\n const { renderCell: RenderCell = DefaultRenderCell } = column;\n return (\n <td key={column.key.toString()} css={tableCellStyle}>\n <RenderCell cell={{ value: cell }} row={row} />\n </td>\n );\n })}\n {RenderActions ? (\n <td css={tableCellStyle}>\n <RenderActions row={row} index={index} />\n </td>\n ) : null}\n </tr>\n );\n })}\n </tbody>\n </table>\n </WithPagination>\n );\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["Checkbox","ListItem","ListItemIcon","MenuList","Popper","WithPagination","css","resetButtonStyle","useCallback","useState","useGridLayout","useSort","useTheme","ArrowDownwardIcon","ArrowUpwardIcon","React","jsx","___EmotionJSX","DefaultRenderCell","props","cell","value","JSON","stringify","tableCellStyle","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","_ref5","HeaderCell","theme","anchorEl","setAnchorEl","handleClose","undefined","handleToggle","event","currentTarget","prev","open","Boolean","palette","gray","onClick","children","disablePortal","onClickOutside","placement","paperProps","elevation","menuItems","map","_ref6","label","renderIcon","Icon","key","_ref","_ref2","_ref3","_ref4","TableUI","columns","data","striped","stickyHeader","onSelect","selectedIndex","onSelectAll","renderActions","RenderActions","onPaginate","pageTotal","getRowStyle","allChecked","length","dataSorted","order","setOrder","gridStyle","typography","body","zIndex","appBar","defaultChecked","onChange","checked","target","indeterminate","column","orderBy","by","direction","title","text","hint","_ref7","row","index","includes","customRowStyle","intentions","primary","light","renderCell","RenderCell"],"sources":["../../../src/TableUI/index.tsx"],"sourcesContent":["import { Checkbox } from \"../Checkbox\";\nimport { ListItem, ListItemIcon } from \"../List\";\nimport { MenuList } from \"../Menu\";\nimport { Popper } from \"../Popper\";\nimport { WithPagination, WithPaginationProps } from \"./WithPagination\";\nimport { css } from \"@emotion/react\";\nimport { resetButtonStyle } from \"../Button\";\nimport { useCallback, useState } from \"react\";\nimport { useGridLayout } from \"./useGridLayout\";\nimport { useSort } from \"./useSort\";\nimport { useTheme } from \"../theme\";\nimport ArrowDownwardIcon from \"@mui/icons-material/ArrowDownward\";\nimport ArrowUpwardIcon from \"@mui/icons-material/ArrowUpward\";\nimport React from \"react\";\nimport type { CSSObject, SerializedStyles } from \"@emotion/react\";\nimport type { Theme } from \"../theme\";\n\nexport interface TableUIRenderCellProps<Row, Value> {\n cell: { value: Value };\n row: Row;\n}\n\nconst DefaultRenderCell = (\n props: TableUIRenderCellProps<Record<string, unknown>, unknown>,\n) => {\n const { cell } = props;\n return (\n <div>\n {typeof cell.value === \"string\" ? cell.value : JSON.stringify(cell.value)}\n </div>\n );\n};\n\nconst tableCellStyle = css`\n box-sizing: border-box;\n padding: 8px 16px;\n font: inherit;\n line-height: inherit;\n text-align: left;\n letter-spacing: inherit;\n border-bottom: 1px solid #e0e0e0;\n &:first-of-type:has(input[type=\"checkbox\"]) {\n padding: 0px;\n label {\n display: flex;\n padding: 8px;\n }\n }\n`;\n\ninterface HeaderCellProps extends React.PropsWithChildren {\n menuItems: {\n label: string;\n onClick: () => void;\n renderIcon: (props: Record<string, unknown>) => React.JSX.Element;\n }[];\n}\n\nconst HeaderCell = (props: HeaderCellProps) => {\n const theme = useTheme();\n const [anchorEl, setAnchorEl] = useState<HTMLElement>();\n const handleClose = useCallback(() => {\n setAnchorEl(undefined);\n }, []);\n const handleToggle = useCallback(\n (event: React.SyntheticEvent<HTMLElement>) => {\n const { currentTarget } = event;\n setAnchorEl((prev) => (prev ? undefined : currentTarget));\n },\n [],\n );\n const open = Boolean(anchorEl);\n\n return (\n <th\n css={[\n tableCellStyle,\n css`\n padding: 0px;\n cursor: pointer;\n background-color: white;\n transition: background-color 0.1s ease-in-out;\n &:hover {\n background-color: ${theme.palette.gray[200]};\n }\n `,\n ]}\n >\n <button\n css={[\n resetButtonStyle,\n css`\n display: inline-block;\n width: 100%;\n padding: 8px 16px;\n text-align: inherit;\n `,\n ]}\n onClick={handleToggle}\n >\n {props.children}\n </button>\n <Popper\n disablePortal\n onClickOutside={handleClose}\n anchorEl={anchorEl}\n open={open}\n placement=\"bottom-start\"\n >\n <MenuList\n paperProps={{\n elevation: 5,\n }}\n >\n {props.menuItems.map(({ onClick, label, renderIcon: Icon }) => {\n return (\n <ListItem\n key={label}\n onClick={() => {\n onClick();\n handleClose();\n }}\n >\n <ListItemIcon>\n <Icon />\n </ListItemIcon>\n {label}\n </ListItem>\n );\n })}\n </MenuList>\n </Popper>\n </th>\n );\n};\n\nexport type TableUIColumn<Row> = {\n [Key in keyof Row]: {\n // このキーのユニークチェックを行った方が良い。\n // 出来ればランタイムは無駄が大きいので型でチェックしたい。\n key: Key;\n title?: string;\n renderCell?: ({\n cell,\n row,\n }: TableUIRenderCellProps<Row, Row[Key]>) => React.JSX.Element;\n // デフォルトでソートは有効化する\n sort?: (a: Row[Key], b: Row[Key]) => number;\n /*\n この列の幅が全体に占める比を指定する。\n * columnRatio指定しない場合は、autoが指定されたものとして扱われます。\n * table要素本来の自動調整が効かなくなるので、注意して利用してください。\n /\n columnRatio?: number;\n };\n}[keyof Row];\n\nexport interface TableUIPropsOnSelectArgs<Row> {\n row: Row;\n index: number;\n checked: boolean;\n}\n\nexport interface TableUIPropsRenderActionsArgs<Row> {\n row: Row;\n index: number;\n}\n\nexport interface TableUIPropsGetRowStyleArgs<Row> {\n row: Row;\n index: number;\n theme: Theme;\n}\n\nexport interface TableUIProps<Row> extends WithPaginationProps {\n /\n テーブルをストライプ柄にするかどうか\n * @default false\n /\n striped?: boolean;\n /\n テーブルのヘッダーを固定するかどうか\n * @default false\n /\n stickyHeader?: boolean;\n /\n テーブルの列の情報\n /\n columns?: TableUIColumn<Row>[];\n /\n 空配列の場合は読み込み済み、undefinedの場合は読み込み中であると見なされます。\n * 基本的にJSONフレンドリーなオブジェクトを渡すようにしてください。ReactElementなどは非推奨です。\n * 代わりにcolumnsで定義できるrenderCellを利用するか、ReactComponentを渡してください。\n \n dataにはcolumnsに存在しないものも含められます。\n /\n data?: Row[];\n /\n 現在選択されている行のindexの配列\n /\n selectedIndex?: number[];\n /\n 行毎のチェックボックスが生える\n /\n onSelect?: ({ row, index, checked }: TableUIPropsOnSelectArgs<Row>) => void;\n /\n 全てをチェックするボタンが生える\n /\n onSelectAll?: ({ data, checked }: { data: Row[]; checked: boolean }) => void;\n /\n onSelectで生えるチェックボックスのname\n * formDataから取得できる値は選択された行のindexです。\n /\n name?: string;\n /\n 行の末尾にインタラクティブ要素を追加するためのメソッド\n /\n renderActions?: (\n args: TableUIPropsRenderActionsArgs<Row>,\n ) => React.JSX.Element;\n /\n 行のスタイルをカスタマイズするための関数\n * @param args - 行のデータ、インデックス、テーマオブジェクトを含むオブジェクト\n * @returns Emotion CSSオブジェクトまたはCSSオブジェクト\n /\n getRowStyle?: (\n args: TableUIPropsGetRowStyleArgs<Row>,\n ) => SerializedStyles \| CSSObject \| undefined;\n}\n\nexport const TableUI = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n Row extends Record<string, any>,\n>(\n props: TableUIProps<Row>,\n) => {\n const {\n columns,\n data,\n striped,\n stickyHeader,\n onSelect,\n selectedIndex = [],\n onSelectAll,\n name,\n renderActions: RenderActions,\n onPaginate,\n pageTotal,\n getRowStyle,\n } = props;\n const theme = useTheme();\n\n const allChecked = data?.length === selectedIndex?.length;\n\n const [dataSorted, order, setOrder] = useSort(columns, data);\n\n const gridStyle = useGridLayout(columns);\n\n return (\n <WithPagination onPaginate={onPaginate} pageTotal={pageTotal}>\n <table\n css={[\n theme.typography.body,\n css`\n box-sizing: border-box;\n width: 100%;\n border-spacing: 0;\n border-collapse: separate;\n isolation: isolate;\n border-top: 1px solid #e0e0e0;\n border-right: 2px solid #e0e0e0;\n border-bottom: 1px solid #e0e0e0;\n border-left: 2px solid #e0e0e0;\n thead {\n box-sizing: border-box;\n th {\n white-space: nowrap;\n border-top: 1px solid #e0e0e0;\n border-bottom: 2px solid #e0e0e0;\n }\n }\n `,\n striped\n ? css`\n tr:nth-of-type(even) > td {\n background-color: #f2f2f2;\n }\n `\n : null,\n stickyHeader\n ? css`\n position: relative;\n /\n ここでtheadをstickyにすると、grid layoutのサポートが困難になる。\n */\n thead tr th {\n position: sticky;\n top: 0px;\n z-index: ${theme.zIndex.appBar};\n }\n `\n : null,\n gridStyle,\n ]}\n >\n <thead>\n <tr>\n {onSelect ? (\n <th\n css={[\n tableCellStyle,\n css`\n background-color: white;\n `,\n ]}\n >\n {onSelectAll ? (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n <Checkbox\n defaultChecked={allChecked}\n key={allChecked?.toString()}\n onChange={(event) => {\n if (data) {\n onSelectAll({ data, checked: event.target.checked });\n }\n }}\n indeterminate={selectedIndex.length > 0 && !allChecked}\n />\n </label>\n ) : null}\n </th>\n ) : null}\n {columns?.map((column) => {\n const orderBy = column.key.toString();\n return (\n <HeaderCell\n menuItems={[\n {\n label: \"昇順で並び替え\",\n //@ts-expect-error muiのiconの方がmuiNameプロパティを型で持つようになったためエラーが出る\n renderIcon: ArrowUpwardIcon,\n onClick: () => {\n setOrder({ by: orderBy, direction: \"asc\" });\n },\n },\n {\n label: \"降順で並び替え\",\n //@ts-expect-error muiのiconの方がmuiNameプロパティを型で持つようになったためエラーが出る\n renderIcon: ArrowDownwardIcon,\n onClick: () => {\n setOrder({ by: orderBy, direction: \"desc\" });\n },\n },\n ]}\n key={column.key.toString()}\n >\n <div\n css={css`\n position: relative;\n `}\n >\n {column.title}\n <span\n css={css`\n position: absolute;\n display: inline-flex;\n margin-left: 4px;\n color: ${theme.palette.text.hint};\n `}\n >\n {order?.by === orderBy ? (\n order.direction === \"desc\" ? (\n <ArrowDownwardIcon />\n ) : (\n <ArrowUpwardIcon />\n )\n ) : null}\n </span>\n </div>\n </HeaderCell>\n );\n })}\n {RenderActions ? <th css={tableCellStyle} /> : null}\n </tr>\n </thead>\n <tbody>\n {dataSorted?.map(({ row, index }) => {\n const checked = selectedIndex?.includes(index);\n const customRowStyle = getRowStyle?.({ row, index, theme });\n return (\n <tr\n key={`${index}`}\n css={[\n css`\n &:has(input[type=\"checkbox\"]:checked) > td {\n background-color: ${theme.palette.intentions.primary\n .light};\n }\n `,\n customRowStyle,\n ]}\n >\n {onSelect ? (\n <td css={tableCellStyle}>\n {\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label>\n <Checkbox\n key={checked?.toString()}\n name={name}\n value={index}\n defaultChecked={checked}\n onChange={(event) => {\n onSelect({\n row,\n index,\n checked: event.target.checked,\n });\n }}\n />\n </label>\n }\n </td>\n ) : null}\n {columns?.map((column) => {\n const cell = row[column.key];\n const { renderCell: RenderCell = DefaultRenderCell } = column;\n return (\n <td key={column.key.toString()} css={tableCellStyle}>\n <RenderCell cell={{ value: cell }} row={row} />\n </td>\n );\n })}\n {RenderActions ? (\n <td css={tableCellStyle}>\n <RenderActions row={row} index={index} />\n </td>\n ) : null}\n </tr>\n );\n })}\n </tbody>\n </table>\n </WithPagination>\n );\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "matsuri-ui",
-  "version": "17.0.2-alpha-1750051925500-43a75f0.0",
+  "version": "17.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/matsuri-tech/matsuri-ui.git"

package/types/TableUI/index.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { WithPaginationProps } from "./WithPagination";
 import React from "react";
+import type { CSSObject, SerializedStyles } from "@emotion/react";
+import type { Theme } from "../theme";
 export interface TableUIRenderCellProps<Row, Value> {
     cell: {
         value: Value;
@@ -29,6 +31,11 @@ export interface TableUIPropsRenderActionsArgs<Row> {
     row: Row;
     index: number;
 }
+export interface TableUIPropsGetRowStyleArgs<Row> {
+    row: Row;
+    index: number;
+    theme: Theme;
+}
 export interface TableUIProps<Row> extends WithPaginationProps {
     /**
      * テーブルをストライプ柄にするかどうか
@@ -76,5 +83,11 @@ export interface TableUIProps<Row> extends WithPaginationProps {
      * 行の末尾にインタラクティブ要素を追加するためのメソッド
      */
     renderActions?: (args: TableUIPropsRenderActionsArgs<Row>) => React.JSX.Element;
+    /**
+     * 行のスタイルをカスタマイズするための関数
+     * @param args - 行のデータ、インデックス、テーマオブジェクトを含むオブジェクト
+     * @returns Emotion CSSオブジェクトまたはCSSオブジェクト
+     */
+    getRowStyle?: (args: TableUIPropsGetRowStyleArgs<Row>) => SerializedStyles | CSSObject | undefined;
 }
 export declare const TableUI: <Row extends Record<string, any>>(props: TableUIProps<Row>) => import("@emotion/react/jsx-runtime").JSX.Element;