xvicmanx / react-crud-table Goto Github PK

Hi

React-Crud Table has been very helpful in our implementation, But I had a query once we create a new record all of them in the form turn out to be text fields , how do I change them to a drop down ? Could you please provide your inputs? Thanks , Your help is much appreciated.

Regards
Shravya

Hi

The react-crud table doesn't get displayed as expanded as opposed to how it appears in code sandbox,
I need to click on the header in order to get it displayed, The code sand box has the table loaded or expanded but when I integrate the crud-table in my code it appears collapsed and the column header needs to be clicked on for the data to b displayed , Could you please provide your inputs for this ?
Your help is much appreciated.

Thanks

For me Data is coming dynamically but not displaying on the table.

Hard code data is showing for me also how you did it in codeSanbox.
but when data is coming from server not displaying, data is exactly same as hardcoded json.

Can I use <select> like <textarea>?
In a form like this?
const DescriptionRenderer = ({ field }) => <textarea {...field} />;

Hi,
I add type example:
<Field type="number" name="a" label="A" placeholder="10"/>
Never don't work "type" Why?
" #### type: string The type of the field. This can be (text, number, date, etc). It is useful when you want to make it queryable and/or sortable ".

hello, community,
I've faced a problem when I'm using this dependency,
I want to use a Field of type select that contains values retrieved from the database
So any idea to handle this issue?

could the "sort by" feature in the header be disabled from the table component? the header fields are pretty much sorted without this extra option.

Hello,

I have problem. It's possible refresh table in code or why don't show automatically? When my request insert in crud table he don't show. If I click "sort" example" "id" he show all rows.

Hi

The react crud table has fields for id description and so forth.
These fields when create , update or delete tasks are done a form is popped up.
Each of the fields are editable, Is there a way to make them read-only there is a read-only attribute for form controls , is there a way out for fields to be made read-only?
Your inputs are required.
Thanks.

Regards
Shravya

I am working with this CRUD table but the issue is when I use CreateForm onSubmit ,it works but the UpdateForm OnSubmit button is not working, why?

import React, { Component } from "react";
import ReactDOM from "react-dom";
import CRUDTable, {
Fields,
Field,
CreateForm,
UpdateForm,
DeleteForm
} from "react-crud-table";
import axios from 'axios'
import { useState, useEffect } from "react";
// Component's Base CSS
import "./index.css";
import { render } from "@testing-library/react";
let styles = {
container: { margin: "auto", width: "fit-content" }
};

var tasks = [
{
id: 1,
title: "Create an example",
description: "Create an example of how to use the component"
},
{
id: 2,
title: "Improve",
description: "Improve the component!"
}
];

let count = tasks.length;
const service = {

create: task => {
const headers = {
'Content-Type': 'application/json',
}

axios.post('http://127.0.0.1:8000', {
  "name": task.name,
  "roll_no": task.roll_no,
  "email": task.email,
  "phone":task.phone,
  "address": task.address
    }, {
    headers: headers
  })
.then((response) => {
  alert(response.data);
}, (error) => {
  alert(error);
});

return Promise.resolve(task);

},
update: task => {
alert("update")
var id=this.state.students.find(t => t.id === task.id)
alert("update")
console.log(id)
alert("update")
const headers = {
'Content-Type': 'application/json',
}
//const url='http://127.0.0.1:8000/'+String(task.roll_no)+'/';
/axios.put(url, {
"name": task.name,
"roll_no": task.roll_no,
"email": task.email,
"phone":task.phone,
"address": task.address
}, {
headers: headers
})
.then((response) => {
alert(response.data);
}, (error) => {
alert(error);
});/
return Promise.resolve(task);
},
delete: data => {
const task = tasks.find(t => t.id === data.id);
tasks = tasks.filter(t => t.id !== task.id);
return Promise.resolve(task);
}
};
const SORTERS = {
NUMBER_ASCENDING: mapper => (a, b) => mapper(a) - mapper(b),
NUMBER_DESCENDING: mapper => (a, b) => mapper(b) - mapper(a),
STRING_ASCENDING: mapper => (a, b) => mapper(a).localeCompare(mapper(b)),
STRING_DESCENDING: mapper => (a, b) => mapper(b).localeCompare(mapper(a))
};
const getSorter = data => {
const mapper = x => x[data.field];
let sorter = SORTERS.STRING_ASCENDING(mapper);

if (data.field === "id") {
sorter =
data.direction === "ascending"
? SORTERS.NUMBER_ASCENDING(mapper)
: SORTERS.NUMBER_DESCENDING(mapper);
} else {
sorter =
data.direction === "ascending"
? SORTERS.STRING_ASCENDING(mapper)
: SORTERS.STRING_DESCENDING(mapper);
}

return sorter;
};
class Example extends React.Component{
constructor(props) {
super(props);
this.state = {
students:[]
};
}
componentDidMount(){
axios.get('http://127.0.0.1:8000/').then((response) => {
console.log(response.data);
var studs=[]
var studs2=[]
studs.push(response.data.students)
console.log(studs[0]['0'])
for (var i=0;i<studs[0].length;i++){
studs2.push(studs[0][String(i)])
}
this.setState({
students:studs2
})
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
}
fetchItems=(payload) => {
let result = Array.from(this.state.students);
result = result.sort(getSorter(payload.sort));
return Promise.resolve(result);
}
update= (data) => {
alert("update")
var id=this.state.students.find(t => t.id === data.id)
alert("update")
console.log(id)
alert("update")
const headers = {
'Content-Type': 'application/json',
}
}
please(data) {
alert("update")
var id=this.state.students.find(t => t.id === data.id)
alert("update")
console.log(id)
alert("update")
const headers = {
'Content-Type': 'application/json',
}
}
render() {
const DescriptionRenderer = ({ field }) => <textarea {...field} />
return (

    />
    <Field
      name="email"
      label="Email"
      type="email"
    />
    <Field
      name="phone"
      label="Phone"
    />
    <Field
      name="address"
      label="Address"
      render={DescriptionRenderer}
    />
  </Fields>
  <CreateForm
    title="Student"
    message="Add new Student!"
    trigger="Add Student"
    onSubmit={task => service.create(task)}
    submitText="Add"
    validate={values => {
      const errors = {};
      if (!values.name || !values.phone) {
        errors.name = "Provide all details";
      }

      return errors;
    }}
  />

  <UpdateForm
    title="Task Update Process"
    message="Update task"
    trigger="Update"
    onSubmit={task => service.update(task)}
    submitText="Update"
    validate={values => {
      const errors = {};

      if (!values.id) {
        errors.id = "Please, provide id";
      }

      if (!values.title) {
        errors.title = "Please, provide task's title";
      }

      if (!values.description) {
        errors.description = "Please, provide task's description";
      }

      return errors;
    }}
  />

  <DeleteForm
    title="Task Delete Process"
    message="Are you sure you want to delete the task?"
    trigger="Delete"
    onSubmit={task => service.delete(task)}
    submitText="Delete"
    validate={values => {
      const errors = {};
      if (!values.id) {
        errors.id = "Please, provide id";
      }
      return errors;
    }}
  />
</CRUDTable>

export default Example;