score:0
it seems like the tablehead
has 5 tablecell
, but each tablerow
has 7 tablecell
.
so you need to make sure if the tablehead
and tablerow
has the same number of tablecell
each.
...
<tablehead>
<tablerow>
<tableheader name="name" />
<tableheader name="type" />
<tableheader name="size" />
<tableheader name="hp" />
<tableheader name="cr" />
// try to use 2 empty tablecell
<tablecell />
<tablecell />
</tablerow>
</tablehead>
<tablebody>
...
and also since each tablecell
is aligned left, so you need to add align="left"
to the tablecell
inside tableheader
component.
function tableheader(params) {
return (
<tablecell align="left" classname="table-headers">
<strong>{params.name}</strong>
<div classname="sorting-buttons">
<button>up</button>
<button>down</button>
</div>
</tablecell>
);
}
please make sure if you removed the table-headers
class name from tablerow
in tablehead
. it should not be flex
.
Source: stackoverflow.com
Related Query
- Table header only aligned with first column
- make first column sticky in react table with only CSS
- React-table. the column header starts with the second line, not the first
- How to design table with header cells in the top row and first column?
- React useEffect() only run on first render with dependencies
- How to model a HTML table with two cells per column in React?
- React.js creating a table with a dynamic amount of rows with an editable column
- antd with typescript : Table with Column align='right' is not compiling
- Bootstrap 4 table with the scrollable body and header fixed
- React Material-Ui Sticky Table Header with Dynamic Height
- Table with horizontal and vertical scroll with fixed header
- I am looking for a way to fix the first column in a table component in react material-ui
- React table with static header on browser scroll
- How to model a HTML table with column per component in React?
- Configuring word-wrap in column header of an Antd Table
- React-Virtualized Table only showing one column
- Disappearing HTML on first visit to the page with Gatsby and Material UI in production only
- How to change default sorting icon on table header column on React Material-Table?
- How to create new line in react table column with lots of data
- Scrollable Table with Fixed Header using Reactstrap responsive table
- How to make only text of react bootstrap table header clickable
- Header flickering and freezing issue with material table (implemented with react window + react window infinite loader)
- How to make table header tooltip work with enabled sorting?
- React.js + bootstrap-table working only on first load, but transitions break the table
- Material UI Table with Drop Down inside a column
- React MUI Datagrid align column data and header with type "number"
- React with Kendo-ui Grid - Wrong column header
- is there a way to add a <label></label> to every column header using Material Table React
- React-Table - How to combine useResizeColumns with sticky Header in Material-UI table
- How to use React Router <Link > with an id from antd table column
More Query from same tag
- How to store response data from Axios to a variable in React Functional Component?
- How to mocking react refs with jest/enzyme?
- reactjs - can not read property push of undefined
- Problem with protected routes, context API and firebase user authentication request
- React doesn't render array
- Multiple Fetch requests to set state in React
- How to get the value from URL params in React
- Add a service worker to Webpack in react
- How to make table header tooltip work with enabled sorting?
- React.js component doesn't work in Next.js builds
- I want to upload a image and add URL of the image to firestore
- How to import data from a JSON file in React?
- Don't know why the two functions are showing undefined in React
- TypeError: Cannot read property 'map' of undefined - Shopping cart in reactjs
- Reactjs parent component communicate with child of child component
- What is the correct way to pass props to component in React?
- React Rendering Different components based on hook
- Eslint error when I use babel alias on nextjs
- filtering object and modify properties
- Form element doesn't send all data to mongoDB by using axios. (React,Axios,Express)
- Module build failed: Duplicate declaration
- React.js and ExtJS 4
- MUI Card text overlay
- Define Multiple Styles React
- Can I use React icons with Stack Blitz w/o a terminal?
- How to pop up a material-ui snackbar alert after a "bad login"
- Change font weight to bold for some part of the option value in reactjs
- How to capture option selected event in Material UI autocomplete component?
- React router activeClassName doesnt set active class for child routes
- The react component renders several times when using useEffect