score:0
const columsdefnsamplesqsreacttable = [
{
header: "question code",
accessor: "id",
},
{
header: "question text",
accessor: "questiontext",
style: { overflowwrap: "break-word" }, // allow for words wrap inside this cell
},
];
score:3
in order to get this to work for me i had to use this sytnax:
style: { 'whitespace': 'unset' }
score:12
to further make the answer clearer according to steffan:
this is my column definition :
const responsesdata = [{..}, {..} .... etc ..];
const columsdefnsamplesqsreacttable = [{
header: 'question code',
accessor: 'id'
}, {
header: 'question text',
accessor: 'questiontext',
style: { 'white-space': 'unset' } // allow for words wrap inside only this cell
}];
<reacttable data={responsesdata} columns= columsdefnsamplesqsreacttable }
defaultpagesize={3} />
score:50
you'll want to use the css property white-space: unset;
find the column you want to have wrap text and add the following as a property of the column
// example column definition
{
header: 'header',
accessor: 'data1',
style: { 'whitespace': 'unset' } //add this line to the column definition
}
alternatively you can add a class that targets .reacttable .rt-td
directly in your css/sass/scss
edited: added example column definition to make it clearer, updated to new react-table api
Source: stackoverflow.com
Related Query
- how to display data in table using json in react js?
- How to keep multiple data for check boxes in react using firebase cloud firestore?
- How to get data from table row click using Semantic's React Table Component
- How can I get the data out of a table using Semantic UI React
- How to position columns at the left and data at the right of material UI table for React
- How do you render or not render table data based on conditions, using a loop in React JS?
- how to export the return table data to a csv file using react js
- How to arrange nested array of object data for react table component display
- React Js: How to pass table row data as props to another page using onClick event
- How to mock input change for filtering data based on input string using react testing library?
- How to fetch Mysql table data through PHP in React Js using API?
- How to fetch data from server using JavaScript? (adding backend to React app for the first time)
- How to set state at the server for data from API using react redux
- How to test for data output for material UI table using jest
- How to pass table row data as props to another page using onClick event in React Js
- How to mockup data of table using react testing library in react 17?
- How to filter for a range of values instead of exact values using the React-Admin-Firebase data provider on a React Admin project I'm working on?
- How to display nested json data using antd table in react
- How to insert the input data dynamically in table for particular ID in react JS?
- How to update data for react table
- how to pass data as true on check Checkbox for React Material-UI using React Hooks
- How to display single data using map method for json datatype in React js
- How to get full control styling for data table from DevExtreme React Grid with material-ui?
- How to provide dynamically calculated data in table using react and redux
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- How can I test a change handler for a file-type input in React using Jest/Enzyme?
- How to write test case for ErrorBoundary in React using Jest / Enzyme
- How to update webpack config for a react project created using create-react-app?
- How can I pass data using <Redirect> in react router v4?
- How to do word-wrap for data using react-table?
More Query from same tag
- Externalizing route paths using react-router
- Render first few objects of JSON file in reactjs/redux
- Validating Data in Redux Store
- JSX has no corresponding closing tag. ts(17014)
- Close menu after selecting an anchor link React and Gatsby
- How do I get value of a key value pair in react?
- styled-components does not style <hr /> element
- Redux Form way of changing one Field's value based on another Field without breaking Form Initialisation (based on values)
- How to create dynamic href in react render function?
- setState not triggered from onChange method of CreatableSelect
- React button onClick not working when I removed unrelated elements
- Select component losing it's css when page is refreshed
- How to convert a "raw" DOM Event to a React SyntheticEvent?
- Changing the color of a textarea in a separate file
- How to open a pop up on cell click in a table using ag-grid react?
- A state being updated even if I don't call setstate React
- Use result of Relay Mutation as a Relay Container Prop
- Why is my reducer returning an empty array in react/redux?
- React: Variable after keyname in map function
- Radium with useState makes Invalid hook call
- How to call function from the constructor of a JS class
- Why is this printing twice to my console?
- Toggle Accordion functionality with reactstrap?
- How to avoid repeating interface in Typescript React
- SharePoint Framework with React Component loading images
- React clone vs object.assign
- How can i resize an image in a block display? (javascript or react)
- Stop propagation of all events
- Can't load mock data while mounting component
- how to add input field dynamically when user click on button in react.js