Agregar columnas faltantes al DataTable del componente de facturas

src/Components/Corresponsales/ProveedorFactura/ProveedorFactura.tsx

@@ -47,11 +47,11 @@ export const ProveedorFactura: FC<IProps> = (props) => {
   const MsgTime = 2000;
   const msgColor = 'primary';
   const ClasificacionProveedor = 2;
-  const [Uuid, setUuid] = useState<string | undefined>();
-  const [FechaFactura, setFechaFactura] = useState<string | undefined>();
-  const [Cove, setCove] = useState<string | undefined>();
-  const [Entrega, setEntrega] = useState<string | undefined>();
-  const [Transporte, setTransporte] = useState<string | undefined>();
+  const [Uuid, setUuid] = useState<string>('');
+  const [FechaFactura, setFechaFactura] = useState<string>('');
+  const [Cove, setCove] = useState<string>('');
+  const [Entrega, setEntrega] = useState<string>('');
+  const [Transporte, setTransporte] = useState<string>('');
   const TblHeader: React.FC = () => (
     <table>
       <tr
@@ -73,26 +73,98 @@ export const ProveedorFactura: FC<IProps> = (props) => {
         <td width='560px' style={{ textAlign: 'center' }}>
           Proveedor
         </td>
+        <td width='120px' style={{ textAlign: 'center' }}>
+          UUID
+        </td>
+        <td width='120px' style={{ textAlign: 'center' }}>
+          Fecha Factura
+        </td>
+        <td width='120px' style={{ textAlign: 'center' }}>
+          COVE
+        </td>
+        <td width='120px' style={{ textAlign: 'center' }}>
+          Entrega
+        </td>
+        <td width='120px' style={{ textAlign: 'center' }}>
+          Transporte
+        </td>
       </tr>
     </table>
   );
 
   const columnsFacturas = [
     {
-      name: 'id',
-      width: '10%',
+      name: 'Id',
+      width: '65px',
       selector: (row: ICorresponsalFacturas) => row.id,
       sortable: true,
     },
     {
+      name: 'Factura',
+      width:'150px',
+      selector: (row: ICorresponsalFacturas) => row.factura,
+      sortable: true,
+    },
+    {
+      name: 'Valor Dls',
+      width:'100px',
+      selector: (row: ICorresponsalFacturas) => '$ ' + row.valorFacturaDls,
+      sortable: true,
+    },
+    {
+      name: 'Pedido',
+      width:'130px',
+      selector: (row: ICorresponsalFacturas) => row.pedido,
+      sortable: true,
+    },
+    {
+      name: 'Proveedor',
+      width:'150px',
+      selector: (row: ICorresponsalFacturas) => mProveedores.filter(x => x.id === row.proveedor)[0].nombre,
+      sortable: true,
+      center:true,
+      wrap: true
+    },
+    {
+      name: 'UUID',
+      width:'160px',
+      selector: (row: ICorresponsalFacturas) => row.uuid ? row.uuid : '',
+      sortable: true,
+      center:true,
+      wrap: true
+    },
+    {
+      name: 'Fecha Factura',
+      width: '125px',
+      selector: (row: ICorresponsalFacturas) => row.fechaFactura? row.fechaFactura!.substring(0,11) : '',
+      sortable: true,
+    },
+    {
+      name: 'COVE',
+      selector: (row: ICorresponsalFacturas) => row.cove ? row.cove : '',
+      sortable: true,
+      allowOverflow: true
+    },
+    {
+      name: 'Entrega',
+      selector: (row: ICorresponsalFacturas) => row.entrega ? row.entrega : '',
+      sortable: true,
+    },
+    {
+      name: 'Transporte',
+      selector: (row: ICorresponsalFacturas) => row.transporte ? row.transporte : '',
+      sortable: true,
+    },
+    /* {
       name: <TblHeader />,
       width: '75%',
       cell: (row: ICorresponsalFacturas) => {
         return <ControlledInput record={row} disabled={false} mode={2} />;
       },
-    },
+    }, */
     {
       name: 'Elimina',
+      width: '80px',
       cell: (row: ICorresponsalFacturas) => (
         <div
           style={{
@@ -117,6 +189,7 @@ export const ProveedorFactura: FC<IProps> = (props) => {
   useEffect(() => {
     FacDataService.getAll(props.IDTrafico)
       .then((response) => {
+        console.log(response.data);
         dispatch(populateCorresponsalesFacturas(response.data));
       })
       .catch((e: Error) => {