In my application, I need to reuseable data table component. Where I can change table-header & table-body with dynamic content.
<table className="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Image</th>
<th>Title</th>
<th>Publish Date</th>
</tr>
</thead>
<tbody>
{data &&
data.map(item => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.image}</td>
<td>{item.title}</td>
<td>{item.publishDate}</td>
</tr>
))}
</tbody>
</table>
See if this works! https://stackblitz.com/edit/react-ie2rt6
import React from "react";
const Table = ({ headers, data }) => {
return (
<div>
<table>
<thead>
<tr>
{headers.map(head => (
<th>{head}</th>
))}
</tr>
</thead>
<tbody>
{data.map(row => (
<tr>
{headers.map(head => (
<td>{row[head]}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Table;
This might help
const CustomTable = ({header, posts}) => {
return (
<table>
<thead>
<tr>
<th>#</th>
<th>{header.image}</th>
<th>{header.title}</th>
<th>{header.publishedDate}</th>
</tr>
</thead>
<tbody>
{posts &&
posts.map(item => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.image}</td>
<td>{item.title}</td>
<td>{item.publishDate}</td>
</tr>
))}
</tbody>
</table>
);
}
You can pass header and posts array wherever you need it.
<div className='table'>
<CustomTable header={header} posts={posts} />
</div>
Related
I am new to reactjs. I am trying to create a table with inputs like below,
<table className="table table-bordered table-sm">
<thead>
<tr>
<th></th>
{gameList.map((game)=>{
return (
<th key={game.id}>{game.game_type}</th>
)
})}
</tr>
</thead>
<tbody>
{roundList.map((round)=>{
return(
<tr key={round.id}>
<td>{round.game_round}</td>
{gameList.map((game)=>{
return (
<td key={game.id}>
<input type="text"/>
</td>
)
})
}
</tr>
)
})}
</tbody>
</table>
How do I get all input values by gameId and roundId accordingly?
Hi, If i may notice You are trying to use pure Js in reactJS :). If you want to use same semantic as above lets than add some hooks ;)
const [inputValues, setInputValues] = useState({});
<table className="table table-bordered table-sm">
<thead>
<tr>
<th></th>
{gameList.map((game)=>{
return (
<th key={game.id}>{game.game_type}</th>
)
})}
</tr>
</thead>
<tbody>
{roundList.map((round, index)=>{
return(
<tr key={round.id}>
<td>{round.game_round}</td>
{gameList.map((game, ind)=>{
return (
<td key={game.id}>
<input
type="text"
value={inputValues?.[`${round.id}`]?.[`${game.id}`]}
onChange={(event) => {
setInputValues(old => ({...old, [`${round.id}`]: {...old[`${round.id}`], [`${game.id}`]: event.target.value}}))
}/>
</td>
)
})
}
</tr>
)
})}
</tbody>
</table>
now you have state inputValues for all input values in one object, so you can access them by order.id and game.id.
This is one solutions based on your html structure above, but i strongly recommend to You to create separate Input component, your own controlled component and than to use it maybe in form, than you will have all values in onSubmit form function :)
Rendering not working in td tag, outside td the data is showing but not getting rendering HTML.
td not working.
Data is printing if do console.log but not getting render in HTML
SetArrayTime((prev_array_time) => {
let newArray = [...prev_array_time];
newArray.push(intervals);
return newArray;
});
};
return (
<table className="table table-bordered">
<thead className="thead text-center">
<tr>
<th scope="col">From</th>
<th scope="col">To</th>
</tr>
</thead>
<tbody>
{array_time &&
array_time.map((d, i) => {
console.log("123-d", d);
return (
<tr key={i}>
<td>
{d.from}-{d.to}
</td>
<td></td>
</tr>
);
})}
</tbody>
</table>
);
map return array of react elemnt,react by default map of the array and render. it does not need return
Try this
{array_time?.map((d, i) => (
<tr key={i}>
<td>
{d.from}-{d.to}
</td>
<td></td>
</tr>
))}
There are two table components in the code with same number of columns. Need to move row from One table to Another table using Drag and Drop.
Example:
Table 1:
<table className='table1'>
<thead>
<tr><th>Col 1</th><th>Col 2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
<tr><th>Col 2</th><th>Col 2</th></tr>
<tr><th>Col 3</th><th>Col 2</th></tr>
</tbody>
</table>
Table 2:
<table className='table2'>
<thead>
<tr><th>Col 1</th><th>Col 2</th></tr>
</thead>
<tbody>
<tr><td>2</td><td>23/td></tr>
<tr><th>Col 4</th><th>Col 23</th></tr>
<tr><th>Col 5</th><th>Col 32</th></tr>
</tbody>
</table>
Table 1 and Table 2 need to be drag and droppable. Can anyone help regarding this?
Here is the code, I'm trying to fetch some data from JSON file. Tables are filled by the data, I can drag within the tables, when I drag and drop to another table, I can't move the row to another table, but both are Drag and Droppable. There are no errors shown, when doing drag and drop.
import "./styles.css";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import "bootstrap/dist/css/bootstrap.min.css";
import userdata from "./tempData.json";
import user2data from "./tempData_2.json";
import { useState } from "react";
export default function App() {
const [users, setUsers] = useState(userdata.data);
const [userrs, setUserrs] = useState(user2data.data);
const handleDragEnd = (e) => {
if (!e.destination) return;
let tempData = Array.from(users);
let [source_data] = tempData.splice(e.source.index, 1);
tempData.splice(e.destination.index, 0, source_data);
setUsers(tempData);
};
const handleDraggEnd = (e) => {
if (!e.destinationn) return;
let temppData = Array.from(userrs);
let [sourcee_data] = temppData.splice(e.source.index, 1);
temppData.splice(e.destinationn.index, 0, sourcee_data);
setUserrs(temppData);
};
return (
<div className="App mt-4">
<DragDropContext onDragEnd={handleDragEnd}>
<table className="table borderd">
<thead>
<tr>
<th />
<th>Username</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<Droppable droppableId="droppable-2">
{(provider) => (
<tbody
className="text-capitalize"
ref={provider.innerRef}
{...provider.droppableProps}
>
{users?.map((user, index) => (
<Draggable
key={user.name}
draggableId={user.name}
index={index}
>
{(provider) => (
<tr {...provider.draggableProps} ref={provider.innerRef}>
<td {...provider.dragHandleProps}> = </td>
<td>{user.name}</td>
<td>{user.age}</td>
<td>{user.gender}</td>
</tr>
)}
</Draggable>
))}
{provider.placeholder}
</tbody>
)}
</Droppable>
</table>
</DragDropContext>
<DragDropContext onDragEnd={handleDraggEnd}>
<table className="table borderd">
<thead>
<tr>
<th />
<th>Username</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<Droppable droppableId="droppable-1">
{(provider) => (
<tbody
className="text-capitalize"
ref={provider.innerRef}
{...provider.droppableProps}
>
{userrs.map((user, index) => (
<Draggable
key={user.name}
draggableId={user.name}
index={index}
>
{(provider) => (
<tr {...provider.draggableProps} ref={provider.innerRef}>
<td {...provider.dragHandleProps}> = </td>
<td>{user.name}</td>
<td>{user.age}</td>
<td>{user.gender}</td>
</tr>
)}
</Draggable>
))}
{provider.placeholder}
</tbody>
)}
</Droppable>
</table>
</DragDropContext>
</div>
);
}
I am trying to generate a delete button for the Action column in each row that is being generated in following table using react. How can I achieve that?
<Table>
<thead>
<tr>
<th>
Id
</th>
<th>
Description
</th>
<th>
Protocol
</th>
<th>
Last Seen
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
{table.map((item) => (
<tr key={item.id}>
{Object.values(item).map((val) => (
<td>{val}</td>
))}
</tr>
))}
</tbody>
</Table>
here is the sample code
import React from "react";
const data = [1, 2, 3];
function Login() {
const deleteData = (dataId) => {
console.log(dataId);
};
return (
<>
<table>
<thead>
<tr>
<th>Id</th>
<th>Description</th>
<th>Protocol</th>
<th>Last Seen</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{data.map((val) => (
<tr key={val}>
<td>{val}</td>
<td>{"Desc"}</td>
<td>{"Prot"}</td>
<td>{"Las"}</td>
<td>
{" "}
<button onClick={() => deleteData(val)}>{"delete"}</button>
</td>
</tr>
))}
</tbody>
</table>
</>
);
}
export default Login;
I am trying to render a table inside a react component but having trouble aligning the rows with the header
render() {
console.log("Top Searches",this.props.topSearches)
return(
<div className="topsearches">
<table border="2" align="center">
<th> Search Term </th>
<th>Count </th>
{this.props.topSearches.map((top_search, index) => (
<tr>
{Object.keys(top_search).map(function(key) {
return <div>
<tbody>
<td align="center">{key} </td>
<td align="right">{top_search[key]}</td>
</tbody>
</div>
})}
</tr>
))}
</table>
</div>
)
}
This is the output i am getting
I assume, you are trying to achieve something like this.
I have edited this in codesandbox here.
https://codesandbox.io/s/sparkling-sound-yd1ih
return (
<div className="topsearches">
<table border="2" align="center">
<thead>
<th> Search Term </th>
<th>Count </th>
</thead>
<tbody>
{props.topSearches.map((top_search, index) =>
Object.keys(top_search).map((key, index) => {
return (
<tr>
<td>{key}</td>
<td>{top_search[key]}</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
);
Modification I made to achieve this:
Added <thead>
Corrected <tbody> loop
Please let me know if you have any further questions!