According to the documentation (first FAQ of Table documentation) I have the next code:
<Table
key={index + plant.name}
columns={setColumns(plant.name, plant.id)}
data={setData(plant)}
pagination={{ defaultPageSize: 10, hideOnSinglePage: true }}
/>
But it is still appearing the pagination:
Also I have tried all combinations as:
pagination={{false}}
pagination={false}
pagination={"false"}
But nothing runs properly. Could you help me please?
Currently to testing the maximum number of values are 4 into the table.
The config that I am using:
MacOS Version 10.15.6 (19G2021)
Ant Design Version ^4.5.4
React ^16.13.1
Thank you very much for your time!
You can try checking the length of data which is rendered in your list, If the data length exceeds perPageRecord than you can show.
pagination={data.length > perPageRecord && { defaultPageSize: 10, hideOnSinglePage: true }}
i check the antd portal found out , if want to disabled the display of pagination, need to control the position of the pagination.
position: ['none', 'none']
first one is top, second one is bottom
you can add more condition for display
for more detail: https://ant.design/components/table/
<Table column={yourColumn} dataSource={yourDataSource} pagination={{ position: ['none', 'none'] }}/>
Today we may use hideOnSinglePage option (FAQ):
<Table
columns={COLUMNS}
dataSource={data}
pagination={{ pageSize: PAGE_SIZE, hideOnSinglePage: true }}
/>
Related
I am using Antd Table component, I have bind data by below code. The first page is load data correctly, but when I moved to the second page, it is showing me 'No Data'. I have debugged code and tried to figure it out issue and found that reached data in render state as well but don't know why not bind it. It's work fond at localhost but when i deployed to server, it couldn't work.
Code:
enter image description here
Screenshot::
enter image description here
For people in the future who might have this problem (I also had the problem and solved it):
You probably have the current pageindex and pagesize stored in Redux.
If you have for instance:
30 results in total
a page size of 10
and you are on page 3
Now you change the page size to 100 (and of course you will only have 1 page) then your redux pageindex is still 3 and you try to access page 3 although only one page exists.
This leads to this error.
Solution:
const pagination = {
position: ['bottomCenter'],
showSizeChanger: true,
showQuickJumper: true,
onChange: (page) => {
dispatchFns.setConfig('currentPage', page);
},
onShowSizeChange: (_, pPageSize) => {
dispatchFns.setConfig('currentPage', 1); // this is the necessary line to fix the bug
dispatchFns.setConfig('pageSize', pPageSize);
},
total: itemsToShow.length,
current: currentPage,
pageSize,
};
// currentPage comes from Redux
// pageSize comes from Redux
Its resolved!
I have added current (current:pagination.current) in pagination option in antd table as below
<Table
size={'small'}
scroll={{ x: 370 }}
rowKey={record => record.template_id}
columns={columns}
dataSource={roleTemplateData}
pagination={{ pageSize: pagination.pageSize, pageSizeOptions: pageSizeOptions, showSizeChanger: true, total: pagination.total, position: position, current:pagination.current }}
loading={loading}
onChange={this.handleTableChange}
/>
Thanks.
I'm trying to figure out how I can ReactiveList to display a related searches feature on the results page. It seems that my es app on appbaseio keeps adding links EVEN after the page has sat idle for a few minutes, NO USER INTERACTION at all.
This is my code for the ReativeList component
<ReactiveList
componentId="related-searches"
pages={1}
size={5}
stream={false}
showResultStats={false}
react={{
"and": ["SearchSensor"]
}}
onData={(res) => <a href="#" className="card-link"><li
className="list-inline-item">Link text</li></a>}
/>
I thought that pages, size and stream (and their settings) would stop the streaming (or whatever is causing it)?
You can use the defaultQuery prop on ReactiveList to make it show some default results (or related searches in your case) docs. For example:
<ReactiveList
...
defaultQuery={() => ({
match: {
authors: 'J.K. Rowling'
}
})}
/>
Demo
I need a currency amount input. Is there anyway to customize the InputNumber to support things like commas (',') or $?
Similar to these:
http://leonardowf.github.io/react-simple-currency/
https://github.com/jsillitoe/react-currency-input
I'm using form and InputNumber right now but it is hard to read (for the user) without at least the commas per thousand:
<Col span='24'>
<FormItem label='Original Investment'>
{getFieldDecorator('originalInvestment', {
rules: [{ required: true, message: 'Please input your Investment!' }],
initialValue: 100000000
})(
<InputNumber min={100000000} max={10000000000} />
)}
</FormItem>
</Col>
you can use the formatter property to achieve this
<InputNumber
defaultValue={1000}
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
parser={value => value.replace(/\$\s?|(,*)/g, '')}
onChange={onChange}
/>
check https://ant.design/components/input-number/#components-input-number-demo-formatter for more
It is not supported yet, you can trace https://github.com/ant-design/ant-design/issues/4681
Use this library. It's well maintained and it's well tested
https://github.com/s-yadav/react-number-format.
I tried quite a bit of libraries. This fixed my problem
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result:
I am building my system and I wanted to use jQuery UI, but I am experiencing some trouble with FF, it works fine with IE and Chrome no problem, and as these are the two main browsers used by the company, it is not urgent, but as I use jQuery UI a lot on other projects, and it's an interesting little quirk (maybe a bug?), it needs mentioning.
I want to assign two database table to another and insert the assignment into another table.
<div id="to" style="width:100px;">
<table border="1">
<tr class="tableHeader">
<td>Employee</td>
</tr>
<tr><td>...</td></tr>
</table>
</div>
<div id="from" style="height:8em">
<table>
<tr><td>...</td></tr>
</table>
</div>
and JS:
$('#from tr').draggable({
revert: "invalid", appendTo : "#content", helper : "clone" });
$('#to').droppable({drop : function(event, ui) {
alert("Drop")
}});
Please see my JSFiddle to demonstrate, if you're using FF, you will notice that when you drag a record from near the bottom of the "from" table, the div scrollbar will snap back to the top, and the helper is displayed a way down from the Y of the mouse, meaning that you can't drop the record as it is too far down.
As I said, no problem in IE or Chrome, and that's what my client use, but isn't it funny?
Thanks
Luke
Hei Luke,
Try to add cursorAt: { bottom: 0 } in your draggable function. It should work in FF.
$('#from tr').draggable({
revert: "invalid",
cursorAt: { bottom: 0 },
appendTo : "#content",
helper : "clone"
});
Update fiddle: http://jsfiddle.net/vS3EH/11/