I have PrimeReact DataTable with search/filter functionality. My main goal here is to highlight the text or data in DataTable that matches on the Search Input of the user.
I used react-highlight-words for the highlighting of data. Using the props textToHighlight, I can highlighted the text.
The Problem:
textToHighlight only accepts string and I don't have idea how to pass the component DataTable or its data in the props.
I tried the following:
I pass the Input state in textToHighlight props but unfortunately it prints the data outside the table.
I tried to put the DataTable component inside the Highlighter component, but the table doesn't render.
Here's the image:
ThesisList.jsx
// Search Box
const renderHeader = () => {
return (
<div className="flex justify-between">
<Button
className="p-button-outlined"
icon="pi pi-filter-slash"
label="Clear"
onClick={clearFilter}
/>
<span className="p-input-icon-left">
<i className="pi pi-search" />
<InputText
placeholder="Search"
value={globalFilterValue}
onChange={onGlobalFilterChange}
/>
</span>
</div>
);
};
// The function who checks if the input matches the Filters (check initFilter()).
const onGlobalFilterChange = (e) => {
const value = e.target.value;
let _filter = { ...filters };
_filter["global"].value = value;
setFilters(_filter);
setGlobalFilterValue(value);
};
return (
<div className="p-4 w-full h-screen">
//As you can see here I used the Input state
<Highlighter
searchWords={[globalFilterValue]}
textToHighlight={globalFilterValue}
/>
<DataTable>
...
</DataTable>
</div>
);
Each column in Primereact Data table takes a prop called body through which we can format the cells, so in your case, you can pass the Highlighter as the body for each column.
Here's an example with the title column.
<Datatable>
...
<Column
field="title"
header="Title"
body={(rowData) => (
<Highlighter
searchWords={[globalFilterValue]}
textToHighlight={rowData.title}
/>
)}
/>
...
</Datatable>
Related
I am currently working on a form where you can enter diverse data (text, img's and also choose pdf's).
With the latter I am having some troubles. When I want to edit a form, the Selectfield (where the pdf is safed) is empty.
First of, when I open the Modal to edit the entry, I get my data like this:
onMount(async () => {
const data = await api.get('/documents');
console.log({ data });
documents = data.map((doc) => ({ value: doc.id, label: doc.name }));
if (isEdit) {
selectedDocument = data.find((doc) => doc.value === formInput.projectId);
}
});
I want to display the chosen PDF in a SelectInput field:
<div class="sm:col-span-3">
<SelectInput
id="files"
items={documents}
name="files"
label="Dateien"
bind:selectedItem={selectedDocument}
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
/>
</div>
The component SelectInput is built like this:
<script>
import Select from 'svelte-select';
export let items = [];
export let selectedItem = undefined;
export let id;
export let name;
export let label;
function handleSelect(event) {
selectedItem = event.detail;
console.log('selectedItem', selectedItem);
}
function handleClear() {
selectedItem = undefined;
}
</script>
<div class={`themed ${$$props.class}`}>
<label for={id} class="block text-base font-medium text-gray-700">{label}</label>
<Select {id} {items} {name} on:select={handleSelect} on:clear={handleClear} />
</div>
TLDR: The Select-value is not preselected like the other text-areas. Basically I want to edit a dB entry. So when I click on "edit" I want to see all the changable values (title, uppertext, lowertext, selectedItem). So far I am only able to see the textareas but not the selectable. When I open the edit, it is empty and I dont know why.
Because I'm not familiar with the svelte-select package, I can't be sure as to why it is not reacting to the changes. But here's what I would try to debug this:
Check if there are any errors printed in the console on the server or browser?
Use bind:items for <SelectInput>
Use bind:items for <Select>
Finally, if none of those work, you can use a key block. This will force it to re-render when the key changes.
{#key items}
<SelectInput
/>
{/key}
I'm having trouble identifying selected rows with a checkbox in prime React. the structure of the table is as follows: (the column with the checkbox most be "Visible?").
<div className="col-12">
<DataTable value={variableOptions} editMode = "cell" className="editable-cells-table"
dataKey="_id" paginator rows={10} rowsPerPageOptions={[5, 10, 25]}
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" header={"Variables"} responsiveLayout="scroll">
<Column field="name" header="Nombre" sortable />
<Column field="units" header="Unidad" sortable />
<Column field="isPrincipal" header="Gerarquia" sortable />
<Column field="isVisible" header="Visible?" sortable onClick={(e) => bodyCheckBoxVisible(e)}/>
</div>
and the function where i have return the checkbox
const bodyCheckBoxVisible = (e) => {
return ( <Checkbox inputId="binary" checked={checked} onChange={e => setChecked(e.checked)} />)
}
The problem is that the function does not return the checkbox inside the table row.
How to solve this?
once the checkbox is shown I must be able to select more than one row because more than one variable can be visible or not, I don't know how to do this function either.
each row has a name and id that identify them, once identified making the change is not difficult I imagine
Your "bodyCheckBoxVisible" method is returning a component, but you are doing nothing with it.
Instead you could create a state named "checkboxVisible", update it on click, and displaying or not your data according to it, something like this :
const [bodyVisible, setBodyVisible] = useState(false);
return (
......
<Column field="isVisible" header="Visible?" sortable onClick={(e) => setBodyVisible(!bodyVisible)}/>
......
{bodyVisible && myElementToDisplay}
......
)
I hope it helped !
I have a simple problem in regards of changing input value. When I type a char the value was displayed, but my problem is the cursor stopped. This is the npm datepicker that I used by the way.
Can someone help me fix?
Play this demo video
Goal: is to create customed design input, that can change the date using datepicker and changing the directly to input.
Here is my code:
import DatePicker from 'react-datepicker';
const InputDate = () => {
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
<button>
<input
type='text'
onChange={(e) => setDate(e.target.value)}
value={date}
/>
</button>
));
return (
<div>
<DatePicker
selected={date}
customInput={<ExampleCustomInput />}
/>
</div>
);
};
I am currently working on an update form (put request) on ReactJS. I have the form data stored as this.state that I want to use to prepopulate, however, I am not sure how to implement it into the dynamic field, as I would want the prepopulated data to still hold on to the 'remove' function to remove that row of fields from the form. Also, I would want the rows to be rendered automatically when the form is rendered. Meaning, if there are two rows of the dynamic field, those two rows has to be shown without pressing the 'add' button. Below is the snippet of the code and a screenshot of the form.
<Form.List name={addon.model} key={addon.model}>
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Row key={field.key}>
{addon.fields.map((a) => (
<Col key={'c' + a.key}>
<Input placeholder={a.label} name={a.key} key={'i' + a.key}
onChange={(e) => this.onChangeAddOn(e, index, addon.model)} />
</Col>
))}
<Col flex="none">
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => {
remove(field.name);
}}
/>
</Col>
</Row>
))
}
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
<PlusOutlined /> Add POCs
</Button>
</div>
);
}}
</Form.List>
screenshot (the '-' button is the remove button, and i am free to add more fields if i press the 'Add POC' button, but the main point is that the two rows of data must be rendered at the start together with the form => data stored in this.state)
All help is appreciated and welcomed, please do help to point me in the right direction as I am still new to ReactJS! I did take a look at render props and Form.List, but I am not sure how to implement it still.
so i need help guys, i want to replace the old radio button (classic)
with a new one using material-ui. i couldn't make it.
please suggest a solution.
thx in advance.
in pic u will see everything
class Question extends Component {
render() {
var that = this; // Funny way to be able to access this from inside our iterator() function below.
var iterator = this.props.questionChoices.map(function(choice){
return (
<div className="radio">
<label>
<input type= {that.props.questionType} name={that.props.questionID} value={choice}/>
{choice}
</label>
<RadioButtonGroup >
<RadioButton
value="ludicrous"
label={choice}
valueSelected={choice}
style={styles.radioButton}
/>
</RadioButtonGroup>
</div>
);
});
return (
<div className="row">
<div className="form">
<Paper zDepth={1} >
<div className="h3">
<h3 >{this.props.questionID} - {this.props.questionText}</h3>
{iterator}
</div>
</Paper>
</div>
</div>
);
}
}
result of the problem image
You are rendering the old radio button as well, you also need to define the selected value in the group component and render the group only once, currently you are rendering it for every option.
var iterator = (
<RadioGroup value={this.state.value} onChange={this.handleChange}>
{ this.props.questionChoices.map(choice =>
<FormControlLabel value={choise} control={<Radio />} label={choise} />
)
}
</RadioGroup>
);
Then you need to create the handleChange function to update the state.
class Question extends Component {
state = {
value: '',
};
handleChange = (event, value) => {
this.setState({ value });
};
...
You can find a working example here: https://material-ui-next.com/demos/selection-controls/