@soyfri/shared-library 1.0.9 → 1.1.1
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.
- package/cjs/components/Table/Table.cjs +1 -1
- package/esm/components/Column/Column.d.ts +1 -0
- package/esm/components/Table/Table.d.ts +4 -3
- package/esm/components/Table/Table.definition.d.ts +2 -0
- package/esm/components/Table/Table.js +1 -1
- package/esm/components/Table/Table.stories.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),t=require("react"),s=require("@mui/material"),r=require("../../node_modules/@mui/icons-material/esm/DownloadOutlined.cjs"),o=require("../../node_modules/@mui/icons-material/esm/FirstPage.cjs"),n=require("../../node_modules/@mui/icons-material/esm/LastPage.cjs"),i=require("../../node_modules/@mui/icons-material/esm/KeyboardArrowLeft.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),t=require("react"),s=require("@mui/material"),r=require("../../node_modules/@mui/icons-material/esm/DownloadOutlined.cjs"),o=require("../../node_modules/@mui/icons-material/esm/FirstPage.cjs"),n=require("../../node_modules/@mui/icons-material/esm/LastPage.cjs"),i=require("../../node_modules/@mui/icons-material/esm/KeyboardArrowLeft.cjs"),l=require("../../node_modules/@mui/icons-material/esm/KeyboardArrowRight.cjs"),a=require("./exportsUtils.cjs"),x=require("../../node_modules/@mui/material/esm/Alert/Alert.cjs");const c=t.forwardRef((function(t,s){return e.jsxRuntimeExports.jsx(x,Object.assign({elevation:6,ref:s,variant:"filled"},t))}));function u({data:x,children:u,currentPage:p,pageSize:m,totalPages:d,previousPage:h,nextPage:j,pageSizeSelectorValue:b=10,onPageChange:E,onPageSizeChange:g,visiblePageNumbers:f=5,enableCSVExport:R=!1,csvExportFileName:y="data.csv",csvExportButtonText:C="Exportar CSV",csvExportColumns:S,enableExcelExport:v=!1,excelExportFileName:w="data.xlsx",excelExportButtonText:k="Exportar Excel",excelExportColumns:T,enableRowSelection:z=!1,rowIdentifier:I,onSelectionChange:B}){const P=t.Children.toArray(u).filter((e=>t.isValidElement(e)&&"Column"===e.type.displayName)),[q,M]=t.useState(!1),[_,A]=t.useState(""),[N,O]=t.useState("info"),[V,W]=t.useState([]);t.useEffect((()=>{W([])}),[x,p,m]),t.useEffect((()=>{null==B||B(V)}),[V,B]);const F=(e,t)=>{"clickaway"!==t&&M(!1)},D="function"==typeof E&&"number"==typeof p,[H,K]=t.useState(1),[L,G]=t.useState(b),U=D?p:H,$=D?m:L,J=(U-1)*$,Q=x.slice(J,J+$),X=D?d:Math.ceil(x.length/$),Y=e=>{e<1||e>X||(D?null==E||E(e):K(e))},Z=(()=>{const e=[],t=X,s=U,r=Math.floor(f/2);let o=Math.max(1,s-r),n=Math.min(t,s+r);n-o+1<f&&(1===o?n=Math.min(t,o+f-1):n===t&&(o=Math.max(1,t-f+1)));for(let t=o;t<=n;t++)e.push(t);return e})(),ee=e=>!!I&&V.some((t=>t[I]===e[I])),te=Q.filter(ee).length,se=Q.length>0&&te===Q.length,re=te>0&&te<Q.length;return e.jsxRuntimeExports.jsxs(s.TableContainer,{component:s.Paper,sx:{borderRadius:2,overflow:"hidden"},children:[e.jsxRuntimeExports.jsxs(s.Table,{sx:{minWidth:650},"aria-label":"custom table",children:[e.jsxRuntimeExports.jsx(s.TableHead,{sx:{backgroundColor:e=>e.palette.grey[100]},children:e.jsxRuntimeExports.jsxs(s.TableRow,{children:[z&&e.jsxRuntimeExports.jsxs(s.TableCell,{padding:"checkbox",sx:{width:"50px"},children:[" ",e.jsxRuntimeExports.jsx(s.Checkbox,{color:"primary",indeterminate:re,checked:se,onChange:e=>{if(I)if(e.target.checked){const e=[...V];Q.forEach((t=>{const s=t[I];e.some((e=>e[I]===s))||e.push(t)})),W(e)}else{const e=V.filter((e=>!Q.some((t=>t[I]===e[I]))));W(e)}else console.warn("`rowIdentifier` prop is required for row selection.")},inputProps:{"aria-label":"select all desserts"}})]}),P.map(((t,r)=>e.jsxRuntimeExports.jsx(s.TableCell,{sx:{fontWeight:"bold",color:e=>e.palette.text.secondary,width:t.props.width||"auto",whiteSpace:"nowrap"},children:e.jsxRuntimeExports.jsx(s.Typography,{variant:"subtitle2",fontWeight:"bold",children:t.props.name})},r)))]})}),e.jsxRuntimeExports.jsxs(s.TableBody,{children:[Q.map(((t,r)=>{const o=z&&ee(t);return e.jsxRuntimeExports.jsxs(s.TableRow,{sx:{"&:last-child td, &:last-child th":{border:0},"&:hover":{backgroundColor:e=>e.palette.action.hover}},selected:o,children:[z&&e.jsxRuntimeExports.jsxs(s.TableCell,{padding:"checkbox",sx:{width:"50px"},children:[" ",e.jsxRuntimeExports.jsx(s.Checkbox,{color:"primary",checked:o,onClick:e=>((e,t)=>{if(!I)return void console.warn("`rowIdentifier` prop is required for row selection.");const s=t[I],r=V.findIndex((e=>e[I]===s));let o=[];-1===r?o=o.concat(V,t):0===r?o=o.concat(V.slice(1)):r===V.length-1?o=o.concat(V.slice(0,-1)):r>0&&(o=o.concat(V.slice(0,r),V.slice(r+1))),W(o)})(0,t),inputProps:{"aria-labelledby":`table-checkbox-${r}`}})]}),P.map(((r,o)=>{const{field:n,children:i}=r.props;let l;return l=Array.isArray(n)?n.reduce(((e,s)=>(e[s]=t[s],e)),{}):{[n]:t[n]},e.jsxRuntimeExports.jsx(s.TableCell,{sx:{width:r.props.width||"auto",whiteSpace:"nowrap"},children:i(l)},o)}))]},r)})),0===Q.length&&e.jsxRuntimeExports.jsx(s.TableRow,{children:e.jsxRuntimeExports.jsx(s.TableCell,{colSpan:P.length+(z?1:0),sx:{textAlign:"center",py:4},children:e.jsxRuntimeExports.jsx(s.Typography,{variant:"body2",color:"text.secondary",children:"No hay datos disponibles para mostrar."})})})]})]}),(X>0||R||v||z&&V.length>0)&&e.jsxRuntimeExports.jsxs(s.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",p:2,children:[X>0&&e.jsxRuntimeExports.jsx(s.Select,{size:"small",value:$,onChange:e=>{return t=Number(e.target.value),void(D?(null==g||g(t),null==E||E(1)):(G(t),K(1)));var t},children:[1,2,3,5,10,20,50,100].map((t=>e.jsxRuntimeExports.jsxs(s.MenuItem,{value:t,children:["Mostrar ",t]},t)))}),X>0&&e.jsxRuntimeExports.jsxs(s.Box,{display:"flex",alignItems:"center",gap:.5,sx:{flexGrow:1,justifyContent:"center"},children:[e.jsxRuntimeExports.jsx(s.IconButton,{onClick:()=>Y(1),disabled:U<=1,size:"small",color:"primary",children:e.jsxRuntimeExports.jsx(o,{fontSize:"small"})}),e.jsxRuntimeExports.jsx(s.IconButton,{onClick:()=>Y(U-1),disabled:U<=1,size:"small",color:"primary",children:e.jsxRuntimeExports.jsx(i,{fontSize:"small"})}),Z.map((t=>e.jsxRuntimeExports.jsx(s.Button,{onClick:()=>Y(t),variant:U===t?"contained":"text",size:"small",sx:{minWidth:"32px",height:"32px"},children:t},t))),e.jsxRuntimeExports.jsx(s.IconButton,{onClick:()=>Y(U+1),disabled:U>=X,size:"small",color:"primary",children:e.jsxRuntimeExports.jsx(l,{fontSize:"small"})}),e.jsxRuntimeExports.jsx(s.IconButton,{onClick:()=>Y(X),disabled:U>=X,size:"small",color:"primary",children:e.jsxRuntimeExports.jsx(n,{fontSize:"small"})})]}),z&&V.length>0&&e.jsxRuntimeExports.jsxs(s.Typography,{variant:"subtitle2",sx:{mr:2},children:[V.length," seleccionados"]}),(R||v)&&e.jsxRuntimeExports.jsxs(s.Box,{display:"flex",alignItems:"center",gap:1,children:[R&&e.jsxRuntimeExports.jsx(s.Button,{variant:"text",color:"primary",onClick:()=>a.exportToCSV({data:x,columns:P,fileName:y,exportColumns:S,setSnackbarOpen:M,setSnackbarMessage:A,setSnackbarSeverity:O}),size:"small",startIcon:e.jsxRuntimeExports.jsx(r,{}),children:C}),v&&e.jsxRuntimeExports.jsx(s.Button,{variant:"text",color:"primary",onClick:()=>a.exportToExcel({data:x,columns:P,fileName:w,exportColumns:T,setSnackbarOpen:M,setSnackbarMessage:A,setSnackbarSeverity:O}),size:"small",startIcon:e.jsxRuntimeExports.jsx(r,{}),children:k})]})]}),e.jsxRuntimeExports.jsx(s.Snackbar,{open:q,autoHideDuration:3e3,onClose:F,anchorOrigin:{vertical:"bottom",horizontal:"center"},children:e.jsxRuntimeExports.jsx(c,{onClose:F,severity:N,sx:{width:"100%"},children:_})})]})}exports.Table=u,exports.default=u;
|
|
2
2
|
//# sourceMappingURL=Table.cjs.map
|
|
@@ -2,6 +2,7 @@ type FieldName<T> = keyof T | Array<keyof T>;
|
|
|
2
2
|
export interface ColumnProps<T> {
|
|
3
3
|
name: string;
|
|
4
4
|
field: FieldName<T>;
|
|
5
|
+
width?: string;
|
|
5
6
|
children: (fieldData: Partial<T>) => React.ReactNode;
|
|
6
7
|
}
|
|
7
8
|
export declare function Column<T>(props: ColumnProps<T>): React.ReactNode;
|
|
@@ -20,8 +20,9 @@ interface TableProps<T> {
|
|
|
20
20
|
excelExportFileName?: string;
|
|
21
21
|
excelExportButtonText?: string;
|
|
22
22
|
excelExportColumns?: string[];
|
|
23
|
+
enableRowSelection?: boolean;
|
|
24
|
+
rowIdentifier?: keyof T;
|
|
25
|
+
onSelectionChange?: (selectedItems: T[]) => void;
|
|
23
26
|
}
|
|
24
|
-
export declare function Table<T>({ data, children, currentPage, pageSize, totalPages, previousPage, nextPage, pageSizeSelectorValue, onPageChange, onPageSizeChange, visiblePageNumbers,
|
|
25
|
-
enableCSVExport, csvExportFileName, csvExportButtonText, csvExportColumns, enableExcelExport, excelExportFileName, // Default .xlsx extension for Excel
|
|
26
|
-
excelExportButtonText, excelExportColumns, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare function Table<T>({ data, children, currentPage, pageSize, totalPages, previousPage, nextPage, pageSizeSelectorValue, onPageChange, onPageSizeChange, visiblePageNumbers, enableCSVExport, csvExportFileName, csvExportButtonText, csvExportColumns, enableExcelExport, excelExportFileName, excelExportButtonText, excelExportColumns, enableRowSelection, rowIdentifier, onSelectionChange, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
27
28
|
export default Table;
|
|
@@ -10,3 +10,5 @@ export declare const UserTableSortedByAgeCode = "\n const sortedUsers =
|
|
|
10
10
|
export declare const EmployeeDetailedStatusCode = "\n<Table data={data}>\n<Column name=\"Empleado\" field={['nombre', 'apellido', 'avatar']}>\n {({ nombre, apellido, avatar }) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n <Avatar src={avatar} sx={{ width: 40, height: 40 }}>\n {avatar ? '' : `${nombre!.charAt(0)}${apellido!.charAt(0)}`}\n </Avatar>\n <Typography variant=\"body2\" fontWeight=\"medium\">\n {nombre} {apellido}\n </Typography>\n </Box>\n )}\n</Column>\n<Column name=\"Departamento\" field=\"departamento\">\n {({ departamento }) => (\n <Chip\n label={departamento}\n color=\"info\"\n variant=\"filled\"\n size=\"small\"\n />\n )}\n</Column>\n<Column name=\"Salario\" field=\"salario\">\n {({ salario }) => (\n <Typography variant=\"body2\" fontWeight=\"bold\" color=\"success.dark\">\n ${salario!.toLocaleString('es-ES')}\n </Typography>\n )}\n</Column>\n<Column name=\"Estado de Contrataci\u00F3n\" field={['activo', 'fechaIngreso']}>\n {({ activo, fechaIngreso }) => (\n <Box>\n <Chip\n label={activo ? 'Contratado' : 'Inactivo'}\n color={activo ? 'success' : 'error'}\n size=\"small\"\n />\n <Typography variant=\"caption\" display=\"block\" color=\"text.secondary\" sx={{ mt: 0.5 }}>\n Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}\n </Typography>\n </Box>\n )}\n</Column>\n</Table>\n";
|
|
11
11
|
export declare const ActionsColumnCode = "\n <Table data={data}>\n <Column name=\"Nombre\" field=\"nombre\">\n {({ nombre }) => <Typography variant=\"body2\">{nombre}</Typography>}\n </Column>\n <Column name=\"Email\" field=\"email\">\n {({ email }) => <Typography variant=\"body2\" color=\"text.secondary\">{email}</Typography>}\n </Column>\n <Column name=\"Acciones\" field=\"id\"> \n {({ id }) => (\n <Button\n variant=\"contained\"\n color=\"primary\"\n size=\"small\"\n onClick={() => alert('ID del usuario: '+id )} // Log al hacer clic\n >\n Ver Detalles ({id})\n </Button>\n )}\n </Column>\n </Table>\n ";
|
|
12
12
|
export declare const TableWithExportCode = "\n <Table<Usuario>\n data={usuarios}\n enableExport={enableExport}\n exportFileName={exportFileName}\n exportButtonText={exportButtonText}\n exportColumns={exportColumns}\n >\n <Column<Usuario> name=\"ID\" field=\"id\">\n {(row) => <Typography>{row.id}</Typography>}\n </Column>\n <Column<Usuario> name=\"Nombre\" field=\"nombre\">\n {(row) => <Typography>{row.nombre}</Typography>}\n </Column>\n <Column<Usuario> name=\"Email\" field=\"email\">\n {({ email }) => <Link href={`mailto:${email}`}>{email}</Link>}\n </Column>\n <Column<Usuario> name=\"Edad\" field=\"edad\">\n {(row) => <Typography>{row.edad}</Typography>}\n </Column>\n <Column<Usuario> name=\"Rol\" field=\"rol\">\n {({ rol }) => <Chip label={rol} size=\"small\" />}\n </Column>\n <Column<Usuario> name=\"Acciones\" field=\"id\">\n {({ id }) => (\n <Button variant=\"outlined\" size=\"small\" onClick={() => alert(`Ver detalles de usuario ${id}`)}>\n Ver\n </Button>\n )}\n </Column>\n </Table>\n ";
|
|
13
|
+
export declare const WithRowSelectionCode = "\n\n const [selectedItems, setSelectedItems] = useState<UserData[]>([]);\n\n const handleSelectionChange = (items: UserData[]) => {\n setSelectedItems(items);\n args.onSelectionChange?.(items);\n };\n\n const handleBulkDelete = () => {\n if (selectedItems.length > 0) {\n alert(`Eliminando ${selectedItems.length} usuarios: ${selectedItems.map(item => item.nombre).join(', ')}`);\n setSelectedItems([]);\n } else {\n alert('No hay elementos seleccionados para eliminar.');\n }\n };\n\n const handleBulkUpdateCity = () => {\n if (selectedItems.length > 0) {\n const newCity = prompt('Ingresa la nueva ciudad para los seleccionados:');\n if (newCity) {\n alert(`Actualizando ciudad de ${selectedItems.length} usuarios a ${newCity}`);\n setSelectedItems([]);\n }\n } else {\n alert('No hay elementos seleccionados para actualizar.');\n }\n };\n\n return (\n <Box>\n <Typography variant=\"h6\" gutterBottom>\n Tabla con Selecci\u00F3n de Filas\n </Typography>\n {selectedItems.length > 0 && (\n <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>\n <Button variant=\"contained\" color=\"error\" onClick={handleBulkDelete}>\n Eliminar ({selectedItems.length})\n </Button>\n <Button variant=\"contained\" color=\"primary\" onClick={handleBulkUpdateCity}>\n Actualizar Ciudad ({selectedItems.length})\n </Button>\n <Typography variant=\"body2\" sx={{ alignSelf: 'center', ml: 2 }}>\n Elementos seleccionados: {selectedItems.length}\n </Typography>\n </Box>\n )}\n <Table<UserData>\n {...args}\n data={sampleData} // Usamos sampleData para esta historia\n enableRowSelection={true}\n rowIdentifier=\"id\" // Es crucial que coincida con una clave \u00FAnica en tus datos\n onSelectionChange={handleSelectionChange}\n pageSizeSelectorValue={5}\n >\n <Column<UserData>\n name=\"ID\"\n field=\"id\"\n children={(row) => <Typography>{row.id}</Typography>}\n />\n <Column<UserData>\n name=\"Nombre\"\n field=\"name\"\n children={(row) => <Typography>{row.name}</Typography>}\n />\n <Column<UserData>\n name=\"Email\"\n field=\"email\"\n children={(row) => <Typography>{row.email}</Typography>}\n />\n <Column<UserData>\n name=\"Ciudad\"\n field=\"city\"\n children={(row) => <Typography>{row.city}</Typography>}\n />\n </Table>\n </Box>\n );\n\n";
|
|
14
|
+
export declare const WithExportAndSelectionCode = "\n const [selectedItems, setSelectedItems] = useState<UserData[]>([]);\n\n const handleSelectionChange = (items: UserData[]) => {\n setSelectedItems(items);\n args.onSelectionChange?.(items);\n };\n\n return (\n <Box>\n <Typography variant=\"h6\" gutterBottom>\n Tabla con Exportaci\u00F3n y Selecci\u00F3n de Filas\n </Typography>\n {selectedItems.length > 0 && (\n <Box sx={{ mb: 2 }}>\n <Typography variant=\"body2\">\n Elementos seleccionados: {selectedItems.length}\n </Typography>\n </Box>\n )}\n <Table<UserData>\n {...args}\n data={sampleData} // Usamos sampleData para esta historia\n enableRowSelection={true}\n rowIdentifier=\"id\"\n onSelectionChange={handleSelectionChange}\n pageSizeSelectorValue={5}\n enableCSVExport={true}\n csvExportFileName=\"users_data_with_selection\"\n enableExcelExport={true}\n excelExportFileName=\"users_data_with_selection\"\n >\n <Column<UserData>\n name=\"ID\"\n field=\"id\"\n children={(row) => <Typography>{row.id}</Typography>}\n />\n <Column<UserData>\n name=\"Nombre\"\n field=\"name\"\n children={(row) => <Typography>{row.name}</Typography>}\n />\n <Column<UserData>\n name=\"Email\"\n field=\"email\"\n children={(row) => <Typography>{row.email}</Typography>}\n />\n <Column<UserData>\n name=\"Ciudad\"\n field=\"city\"\n children={(row) => <Typography>{row.city}</Typography>}\n />\n </Table>\n </Box>\n );\n";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as e}from"../../_virtual/jsx-runtime.js";import r,{Children as t,isValidElement as
|
|
1
|
+
import{j as e}from"../../_virtual/jsx-runtime.js";import r,{Children as t,isValidElement as o,useState as l,useEffect as s}from"react";import{TableContainer as i,Paper as a,Table as n,TableHead as c,TableRow as d,TableCell as m,Checkbox as x,Typography as p,TableBody as h,Box as u,Select as f,MenuItem as j,IconButton as g,Button as b,Snackbar as y}from"@mui/material";import v from"../../node_modules/@mui/icons-material/esm/DownloadOutlined.js";import w from"../../node_modules/@mui/icons-material/esm/FirstPage.js";import C from"../../node_modules/@mui/icons-material/esm/LastPage.js";import k from"../../node_modules/@mui/icons-material/esm/KeyboardArrowLeft.js";import S from"../../node_modules/@mui/icons-material/esm/KeyboardArrowRight.js";import{exportToCSV as z,exportToExcel as E}from"./exportsUtils.js";import P from"../../node_modules/@mui/material/esm/Alert/Alert.js";const I=r.forwardRef((function(r,t){return e.jsx(P,Object.assign({elevation:6,ref:t,variant:"filled"},r))}));function M({data:r,children:P,currentPage:M,pageSize:A,totalPages:N,previousPage:_,nextPage:O,pageSizeSelectorValue:R=10,onPageChange:W,onPageSizeChange:F,visiblePageNumbers:T=5,enableCSVExport:V=!1,csvExportFileName:q="data.csv",csvExportButtonText:B="Exportar CSV",csvExportColumns:D,enableExcelExport:K=!1,excelExportFileName:L="data.xlsx",excelExportButtonText:G="Exportar Excel",excelExportColumns:H,enableRowSelection:U=!1,rowIdentifier:$,onSelectionChange:J}){const Q=t.toArray(P).filter((e=>o(e)&&"Column"===e.type.displayName)),[X,Y]=l(!1),[Z,ee]=l(""),[re,te]=l("info"),[oe,le]=l([]);s((()=>{le([])}),[r,M,A]),s((()=>{null==J||J(oe)}),[oe,J]);const se=(e,r)=>{"clickaway"!==r&&Y(!1)},ie="function"==typeof W&&"number"==typeof M,[ae,ne]=l(1),[ce,de]=l(R),me=ie?M:ae,xe=ie?A:ce,pe=(me-1)*xe,he=r.slice(pe,pe+xe),ue=ie?N:Math.ceil(r.length/xe),fe=e=>{e<1||e>ue||(ie?null==W||W(e):ne(e))},je=(()=>{const e=[],r=ue,t=me,o=Math.floor(T/2);let l=Math.max(1,t-o),s=Math.min(r,t+o);s-l+1<T&&(1===l?s=Math.min(r,l+T-1):s===r&&(l=Math.max(1,r-T+1)));for(let r=l;r<=s;r++)e.push(r);return e})(),ge=e=>!!$&&oe.some((r=>r[$]===e[$])),be=he.filter(ge).length,ye=he.length>0&&be===he.length,ve=be>0&&be<he.length;return e.jsxs(i,{component:a,sx:{borderRadius:2,overflow:"hidden"},children:[e.jsxs(n,{sx:{minWidth:650},"aria-label":"custom table",children:[e.jsx(c,{sx:{backgroundColor:e=>e.palette.grey[100]},children:e.jsxs(d,{children:[U&&e.jsxs(m,{padding:"checkbox",sx:{width:"50px"},children:[" ",e.jsx(x,{color:"primary",indeterminate:ve,checked:ye,onChange:e=>{if($)if(e.target.checked){const e=[...oe];he.forEach((r=>{const t=r[$];e.some((e=>e[$]===t))||e.push(r)})),le(e)}else{const e=oe.filter((e=>!he.some((r=>r[$]===e[$]))));le(e)}else console.warn("`rowIdentifier` prop is required for row selection.")},inputProps:{"aria-label":"select all desserts"}})]}),Q.map(((r,t)=>e.jsx(m,{sx:{fontWeight:"bold",color:e=>e.palette.text.secondary,width:r.props.width||"auto",whiteSpace:"nowrap"},children:e.jsx(p,{variant:"subtitle2",fontWeight:"bold",children:r.props.name})},t)))]})}),e.jsxs(h,{children:[he.map(((r,t)=>{const o=U&&ge(r);return e.jsxs(d,{sx:{"&:last-child td, &:last-child th":{border:0},"&:hover":{backgroundColor:e=>e.palette.action.hover}},selected:o,children:[U&&e.jsxs(m,{padding:"checkbox",sx:{width:"50px"},children:[" ",e.jsx(x,{color:"primary",checked:o,onClick:e=>((e,r)=>{if(!$)return void console.warn("`rowIdentifier` prop is required for row selection.");const t=r[$],o=oe.findIndex((e=>e[$]===t));let l=[];-1===o?l=l.concat(oe,r):0===o?l=l.concat(oe.slice(1)):o===oe.length-1?l=l.concat(oe.slice(0,-1)):o>0&&(l=l.concat(oe.slice(0,o),oe.slice(o+1))),le(l)})(0,r),inputProps:{"aria-labelledby":`table-checkbox-${t}`}})]}),Q.map(((t,o)=>{const{field:l,children:s}=t.props;let i;return i=Array.isArray(l)?l.reduce(((e,t)=>(e[t]=r[t],e)),{}):{[l]:r[l]},e.jsx(m,{sx:{width:t.props.width||"auto",whiteSpace:"nowrap"},children:s(i)},o)}))]},t)})),0===he.length&&e.jsx(d,{children:e.jsx(m,{colSpan:Q.length+(U?1:0),sx:{textAlign:"center",py:4},children:e.jsx(p,{variant:"body2",color:"text.secondary",children:"No hay datos disponibles para mostrar."})})})]})]}),(ue>0||V||K||U&&oe.length>0)&&e.jsxs(u,{display:"flex",justifyContent:"space-between",alignItems:"center",p:2,children:[ue>0&&e.jsx(f,{size:"small",value:xe,onChange:e=>{return r=Number(e.target.value),void(ie?(null==F||F(r),null==W||W(1)):(de(r),ne(1)));var r},children:[1,2,3,5,10,20,50,100].map((r=>e.jsxs(j,{value:r,children:["Mostrar ",r]},r)))}),ue>0&&e.jsxs(u,{display:"flex",alignItems:"center",gap:.5,sx:{flexGrow:1,justifyContent:"center"},children:[e.jsx(g,{onClick:()=>fe(1),disabled:me<=1,size:"small",color:"primary",children:e.jsx(w,{fontSize:"small"})}),e.jsx(g,{onClick:()=>fe(me-1),disabled:me<=1,size:"small",color:"primary",children:e.jsx(k,{fontSize:"small"})}),je.map((r=>e.jsx(b,{onClick:()=>fe(r),variant:me===r?"contained":"text",size:"small",sx:{minWidth:"32px",height:"32px"},children:r},r))),e.jsx(g,{onClick:()=>fe(me+1),disabled:me>=ue,size:"small",color:"primary",children:e.jsx(S,{fontSize:"small"})}),e.jsx(g,{onClick:()=>fe(ue),disabled:me>=ue,size:"small",color:"primary",children:e.jsx(C,{fontSize:"small"})})]}),U&&oe.length>0&&e.jsxs(p,{variant:"subtitle2",sx:{mr:2},children:[oe.length," seleccionados"]}),(V||K)&&e.jsxs(u,{display:"flex",alignItems:"center",gap:1,children:[V&&e.jsx(b,{variant:"text",color:"primary",onClick:()=>z({data:r,columns:Q,fileName:q,exportColumns:D,setSnackbarOpen:Y,setSnackbarMessage:ee,setSnackbarSeverity:te}),size:"small",startIcon:e.jsx(v,{}),children:B}),K&&e.jsx(b,{variant:"text",color:"primary",onClick:()=>E({data:r,columns:Q,fileName:L,exportColumns:H,setSnackbarOpen:Y,setSnackbarMessage:ee,setSnackbarSeverity:te}),size:"small",startIcon:e.jsx(v,{}),children:G})]})]}),e.jsx(y,{open:X,autoHideDuration:3e3,onClose:se,anchorOrigin:{vertical:"bottom",horizontal:"center"},children:e.jsx(I,{onClose:se,severity:re,sx:{width:"100%"},children:Z})})]})}export{M as Table,M as default};
|
|
2
2
|
//# sourceMappingURL=Table.js.map
|
|
@@ -14,3 +14,5 @@ export declare const ProductTableWithZeroStockHighlighted: Story;
|
|
|
14
14
|
export declare const EmployeeDetailedStatus: Story;
|
|
15
15
|
export declare const ActionsColumn: Story;
|
|
16
16
|
export declare const TableWithExport: Story;
|
|
17
|
+
export declare const WithRowSelection: Story;
|
|
18
|
+
export declare const WithExportAndSelection: Story;
|