I'm using Material UI table together with Table Pagination, and I'm trying to display the current page together with the 3 leading pages and the 3 prior pages, instead of showing the count amount.
I added the following to TablePagination
<TablePagination labelRowsPerPage='' ...OtherSettings />
but I still get the same results. How can I change the text in the image above so that it shows the pages instead of the amount of rows?
As far as Material Design goes, it is designed to show rows (as mentioned in the Material Design Table Behaviour on the Pagination section).
But nevertheless, you can try using the labelDisplayedRows prop of the TablePagination component to modify the text shown for the rows by default and instead show the number of the pages depending on your row data. It would be something like this:
<TablePagination
...OtherSettings,
labelDisplayedRows={() => {
return `${page}-${Math.floor(rows.length / rowsPerPage)}`;
}}
/>
Additionally, a working sandbox demo and the relevant prop documentation for the TablePagination component: documentation.
Related
I've been using Stack Overflow forever, but I just made an account to ask my first question. Thanks in advance for all your help. Here goes:
I'm trying to work out the proper composition for these custom modular table filtering components I wrote and I could use a little guidance.
My table rows are stored in an array in the main page that these components will be displayed on. Each <TableFilter /> takes a specific column name of the table as a prop and renders UI to input and select filter options (e.g. for numeric columns there's a button that lets the user select <, >, =, etc.) and has a function to apply that filter and return only the selected rows from the table.
I've got these TableFilter components working great independently, but I'd like to be able to apply multiple filters at once. That's why I am working on a TableFilterGroup component that will contain the filters as children and handle passing data between them.
The plan is for easy use of the component, formatted like so:
<TableFilterGroup rows={this.state.tableRows} apply={this.applyFilters} >
<TableFilter column={'Name'} isNumeric={false} />
<TableFilter column={'ID'} isNumeric={true} />
<TableFilter column={'Color'} options={['Red', 'Blue', 'Green']} />
</TableFilterGroup>
I intend to have one "Apply Filters" button, rendered by the TableFilterGroup, that will iteratively call the filter functions of each of the TableFilter child components.
(^ Edit for clarity: this ApplyFilters() function of the TableFilterGroup will get the selected rows from filter 1, then pass them into filter 2 and so on, then finally call this.props.apply to set the fully-filtered rows to a state in the main page that holds these components as well as the actual table where the data is displayed.)
All of the TableFilter components need to work on the table data provided by the rows prop of their parent TableFilterGroup, and the TableFilterGroup needs to be able to iteratively call the filtering functions of each of its TableFilter children, letting their output (the filtered rows) waterfall to apply multiple filters simultaneously.
I've been reading about useRef and all the examples seem to be for the case of the child component being rendered in the return statement of the parent component, but I'm looking to add them in as children in between the two tags of the TableFilterGroup.
If anybody reading this has experience with this type of composition and is able to point me in the right direction, I would very much appreciate it! Or, if the consensus is that I'm just structuring this incorrectly overall, what would you suggest as a better way to format it? Thanks!
I program the behavior of clicking on a row in the ant design Table component. This should change the rowClassName on the Table. Here is an example on CodeSendBox. When you click on a table row, the value in the Store.selectedRowKey changes, but the table is not re rendering. If you move the dividing slider to the sandbox and the table size changes, then rendering occurs and a new row selection is applied
Here's another example, where mobx don't work with ant-design Table
Ant Design Table with Modal form CRUD
I'm new in the Mobx
I really want to understand what I'm doing wrong
To re-render an Ant-Design table, you have to pass the data-source value as a clone of the observable value.
you have to change
<Table
columns={columns}
dataSource={values}
/>
to the following code:
<Table
columns={columns}
dataSource={[...values]}
/>
Basically you don't use selectedRowKey inside your observer component, so that's why it does not rerender when it changes.
You pass a callback function to a Table but Table is not observer.
I am not sure if it possible to make it observer in antd, but what else you can do:
1) Just use selectedRowKey inside your render somewhere. Like just console.log it and then your whole component will rerender (including the Table) when row is clicked.
Or better way, mix it with data rows, for example add isSelected key for each data for inside render and change rowClassName to use this flag:
dataSource={data.map(item => ({...item, isSelected: this.props.Store.selectedRowKey === item.key}))}
rowClassName={x => x.isSelected ? 'test-table-row-selected' : ''}
2) Use antd rowSelection prop like that rowSelection={{selectedRowKeys: [selectedRowKey]}}. But it will also add checkboxes to each row.
I can imagine that people are still looking for answers specially with the newest version of antd.
So in Antd version 5.x table API, you could find a property call rowKey.
In version 4.0 table API, the property called key thou.
And to way to tackle the problem correctly is to set it like following:
<Table
columns={columns}
dataSource={data}
rowKey={data.key} />
Note: Please consider to have a key property in your array of course. key must be unique.
I'm looking to conditionally add a button to my React Table, and for it to display to the right of the row size selector in the PaginationTop section.
The project is currently using react-table 6.9.2.
Currently the table simply uses showPaginationTop as an argument in the ReactTable component, resulting in this header after some custom css:
With a custom element displaying, I'm looking for it to appear as:
Does anyone know if this is possible without changing the react-table source for PaginationTop?
My bad, this can be done with component overriding as mentioned in the documentation here:
https://github.com/tannerlinsley/react-table/tree/v6#component-overrides
For my solution this involved making a new component and setting it as the default:
Object.assign(ReactTableDefaults, {
PaginationComponent: Pagination,
...
Im filtering using remote mode in the Material-Table component, but after each filtered, and Material-Table rendered, it delete the text or selection from the filter section.
So I would like to understand if there is a way in the table to keep this values, because it is necessary that the user have reference of what he is seeing in the table.
Im using the last version, 1.32
This is the component https://github.com/mbrn/material-table
Best Regards and thanks in advance for your time in my case
Move your columns object to a state.
Make a state var,
const [materialColumn] = useState([{title: "Name",field: "name"}]);
Then on your material table
<MaterialTable
columns={materialColumnObj}
/>
This will solve the problem. The filter text will stay. Cheers!
How to integrate mui-datatable with admin-on-rest?
Need the following options in the list view :
move around ordering of columns
show/hide columns
change the number of rows for display
print preview of table
Mui-datatable has these features. According to admin-on-rest documentation, we can use custom Datagrid. Can anyone explain how to do it?
Say you are making a custom-datagrid component 'MyIterator'. This component has to just make use two props that will 'auto-magically' be available to the child of 'List' component. One prop is ids and another is data.
The ids prop is an array of id of currently displayable data-items. And the data is an object containing the data for all the items displayable.
Something like this should do the part of making a custom-datagrid -
const MyIterator = ({ids, data}) => ids.map(id=><div key={id}><span>Label</span><span>{data[id].label}</span></div>)
Above example presumed the data-item object to have a property of 'label'.
And this is how a custom-datagrid can be made.