Datatable not showing indexes

UI Components for React
Post Reply
selimsezer0655
Posts: 1
Joined: 24 Sep 2022, 14:30

24 Sep 2022, 14:48

The data I pulled from the json file does not appear in the datatable. When I look at the components after I put the browser in developer mode, the information in the json appears on the tableHeader side, but the value part on the tablebody side is empty.

The start side of the dashboard.js file

Code: Select all

 const [ozeltarih, setOzeltarih] = useState(null);
    useEffect(() => {
        const productService = new ProductService();
        productService.getOzelTarih().then((data2) => setOzeltarih(data2));
        productService.getMagazalar().then((data) => setProducts(data));
    }, []);  // eslint-disable-line react-hooks/exhaustive-deps
    const onRowEditCompletetarih = (e) => {
        let _ozeltarih = [...ozeltarih];
        let { newData, index } = e;
        _ozeltarih[index] = newData;
        setOzeltarih(_ozeltarih);
    };

    const textEditortarih = (options) => {
        return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} />;
    };
This is The return side of the dashboard.js file

Code: Select all

<DataTable paginator size="small" value={ozeltarih} editMode="row" onRowEditComplete={onRowEditCompletetarih} responsiveLayout="scroll">
  <Column field="tarih" header="Tarih"  editor={(options) => textEditortarih(options)} style={{ width: "20%" }}></Column>
  <Column field="aSaat" header="Açılış Saati" editor={(options) => textEditortarih(options)} style={{ width: "20%" }}></Column>
 <Column field="kSaat" header="Kapanış Saati" editor={(options) => textEditortarih(options)} style={{ width: "20%" }}></Column>
  <Column rowEditor headerStyle={{ width: "10%", minWidth: "8rem" }} bodyStyle={{ textAlign: "center" }}></Column>
</DataTable>
ProductService.js

Code: Select all

   getOzelTarih() {
        return axios.get('assets/demo/data/ozeltarih.json').then(res => res.data.data);
    }
Example of ozeltarih.json

Code: Select all

{
    "data": [ 
        {"tarih": "09/08/22", "aSaat": "11:30", "kSaat": "22:00"},
        {"tarih": "09/07/22", "aSaat": "11:30", "kSaat": "22:00"}
]
}

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

27 Sep 2022, 13:44

can you put together a Code Sanbox reproducer for me. It works fine for me: https://codesandbox.io/s/rytmcb
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests