@@ -200,6 +200,20 @@ export const CippDataTable = (props) => {
200200 } ;
201201
202202 const table = useMaterialReactTable ( {
203+ muiTableBodyCellProps : {
204+ onCopy : ( e ) => {
205+ const sel = window . getSelection ( ) ?. toString ( ) ?? "" ;
206+ if ( sel ) {
207+ e . preventDefault ( ) ;
208+ e . stopPropagation ( ) ;
209+ e . nativeEvent ?. stopImmediatePropagation ?. ( ) ;
210+ e . clipboardData . setData ( "text/plain" , sel ) ;
211+ if ( navigator . clipboard ?. writeText ) {
212+ navigator . clipboard . writeText ( sel ) . catch ( ( ) => { } ) ;
213+ }
214+ }
215+ } ,
216+ } ,
203217 mrtTheme : ( theme ) => ( {
204218 baseBackgroundColor : theme . palette . background . paper ,
205219 } ) ,
@@ -215,66 +229,66 @@ export const CippDataTable = (props) => {
215229 muiTableHeadCellProps : {
216230 sx : {
217231 // Target the filter row cells
218- ' & .MuiTableCell-root' : {
219- padding : ' 8px 16px' ,
232+ " & .MuiTableCell-root" : {
233+ padding : " 8px 16px" ,
220234 } ,
221235 // Target the Autocomplete component in filter cells
222- ' & .MuiAutocomplete-root' : {
223- width : ' 100%' ,
236+ " & .MuiAutocomplete-root" : {
237+ width : " 100%" ,
224238 } ,
225239 // Force the tags container to be single line with ellipsis
226- ' & .MuiAutocomplete-root .MuiInputBase-root' : {
227- height : ' 40px !important' ,
228- overflow : ' hidden' ,
229- textOverflow : ' ellipsis' ,
230- whiteSpace : ' nowrap' ,
231- display : ' flex' ,
232- flexWrap : ' nowrap' ,
240+ " & .MuiAutocomplete-root .MuiInputBase-root" : {
241+ height : " 40px !important" ,
242+ overflow : " hidden" ,
243+ textOverflow : " ellipsis" ,
244+ whiteSpace : " nowrap" ,
245+ display : " flex" ,
246+ flexWrap : " nowrap" ,
233247 } ,
234248 // Target the tags container specifically
235- ' & .MuiAutocomplete-root .MuiInputBase-root .MuiInputBase-input' : {
236- height : ' 24px' ,
237- minHeight : ' 24px' ,
238- maxHeight : ' 24px' ,
249+ " & .MuiAutocomplete-root .MuiInputBase-root .MuiInputBase-input" : {
250+ height : " 24px" ,
251+ minHeight : " 24px" ,
252+ maxHeight : " 24px" ,
239253 } ,
240254 // Target regular input fields (not in Autocomplete)
241- ' & .MuiInputBase-root' : {
242- height : ' 40px !important' ,
255+ " & .MuiInputBase-root" : {
256+ height : " 40px !important" ,
243257 } ,
244258 // Ensure all input fields have consistent styling
245- ' & .MuiInputBase-input' : {
246- height : ' 24px' ,
247- minHeight : ' 24px' ,
248- maxHeight : ' 24px' ,
259+ " & .MuiInputBase-input" : {
260+ height : " 24px" ,
261+ minHeight : " 24px" ,
262+ maxHeight : " 24px" ,
249263 } ,
250264 // Target the specific chip class mentioned
251- ' & .MuiChip-label.MuiChip-labelMedium' : {
252- maxWidth : ' 80px' ,
253- overflow : ' hidden' ,
254- textOverflow : ' ellipsis' ,
255- whiteSpace : ' nowrap' ,
256- padding : ' 0 4px' ,
265+ " & .MuiChip-label.MuiChip-labelMedium" : {
266+ maxWidth : " 80px" ,
267+ overflow : " hidden" ,
268+ textOverflow : " ellipsis" ,
269+ whiteSpace : " nowrap" ,
270+ padding : " 0 4px" ,
257271 } ,
258272 // Make chips smaller overall and add title attribute for tooltip
259- ' & .MuiChip-root' : {
260- height : ' 24px' ,
261- maxHeight : ' 24px' ,
273+ " & .MuiChip-root" : {
274+ height : " 24px" ,
275+ maxHeight : " 24px" ,
262276 // This adds a tooltip effect using the browser's native tooltip
263- ' &::before' : {
264- content : ' attr(data-label)' ,
265- display : ' none' ,
277+ " &::before" : {
278+ content : " attr(data-label)" ,
279+ display : " none" ,
266280 } ,
267- ' &:hover::before' : {
268- display : ' block' ,
269- position : ' absolute' ,
270- top : ' -25px' ,
271- left : '0' ,
272- backgroundColor : ' rgba(0, 0, 0, 0.8)' ,
273- color : ' white' ,
274- padding : ' 4px 8px' ,
275- borderRadius : ' 4px' ,
276- fontSize : ' 12px' ,
277- whiteSpace : ' nowrap' ,
281+ " &:hover::before" : {
282+ display : " block" ,
283+ position : " absolute" ,
284+ top : " -25px" ,
285+ left : "0" ,
286+ backgroundColor : " rgba(0, 0, 0, 0.8)" ,
287+ color : " white" ,
288+ padding : " 4px 8px" ,
289+ borderRadius : " 4px" ,
290+ fontSize : " 12px" ,
291+ whiteSpace : " nowrap" ,
278292 zIndex : 9999 ,
279293 } ,
280294 } ,
@@ -570,7 +584,7 @@ export const CippDataTable = (props) => {
570584 </ Scrollbar >
571585 ) : (
572586 // Render the table inside a Card
573- ( < Card style = { { width : "100%" } } { ...props . cardProps } >
587+ < Card style = { { width : "100%" } } { ...props . cardProps } >
574588 { cardButton || ! hideTitle ? (
575589 < >
576590 < CardHeader action = { cardButton } title = { hideTitle ? "" : title } />
@@ -602,7 +616,7 @@ export const CippDataTable = (props) => {
602616 ) }
603617 </ Scrollbar >
604618 </ CardContent >
605- </ Card > )
619+ </ Card >
606620 ) }
607621 < CippOffCanvas
608622 isFetching = { getRequestData . isFetching }
0 commit comments