We Keep Coding

Custom Column Searching & Filtering in Material Table

I have a column in my table called Active. Data in this column is returned as 1 or 0 for Active and Inactive.
These values are not displayed as 1 or 0. Instead, using the render prop, I have a function generateFlagText which looks for the value and renders an MUI Chip component.
Users cannot search the column by typing Active or Inactive, they would have to type 1 or 0, but they don't know this.
How can I write a check for Active or Inactive to display only those rows in the table using the customSearchAndFilter prop in Material-Table?
This is my column and function:
{
title: <Typography className={classes.colHeader}>Active</Typography>,
field: "Active",
render: (rowData) => generateFlagText(rowData.Active),
// customFilterAndSearch: (term, rowData) => console.log(term), // term is the user input
},
...
export function generateFlagText(status) {
if (status === 1)
return (
<Chip
label={"Active"}
style={{
backgroundColor: "#D9F5FD",
border: "1px solid #5CC1EE",
borderRadius: "4px",
color: "#0063B8",
}}
/>
);
if (status === 0)
return (
<Chip
label={"Inactive"}
style={{
backgroundColor: "#FFEBF5",
border: "1px solid #F69AC6",
borderRadius: "4px",
color: "#A8396F",
}}
/>
);
}

You can make something like this
const data = { type: "active" };
const rows = [
{ name: 1, active: 1 },
{ name: 2, active: 0 }
];
function f(data, rows) {
const mappedValues = {
active: 1,
inactive: 0
};
const currFilter = [];
Object.keys(mappedValues).forEach((key) => {
if (key.includes(data.type)) {
currFilter.push(mappedValues[key]);
}
});
return rows.filter((row) =>
currFilter.some((filterValue) => filterValue === row.active)
);
}
console.log(f(data, rows));
User can input any text and function return rows which includes symbols from ui table.
But it would be easier to make not an input, but a selection of two values in a selector

Don't get value sorter when call method onChange table in react? ( I used sorter: true)

I have source code below: (version antd: "^4.2.4")
column:
const columns = [
{
title: 'ID',
dataIndex: 'id',
sorter: true,
width: 100,
},
...
Table:
<Table rowSelection={rowSelection}
onChange={onChangeTable}
className='table'
size='small'
loading={schedules.loading}
pagination={{
...PAGINATION,
current: schedules.param.current,
pageSize: schedules.param.pageSize,
total: schedules.param.total,
}}
rowKey='id'
columns={columns}
dataSource={schedules.listData}
/>
call onChange:
const onChangeTable = (pagination, sorter) => {
console.log(sorter)
}
console.log(sorter) is empty when I click sort at column id.
Can you help me? Thanks you very much!

The documentation for onChange on the Table component shows the following signature:
function(
pagination,
filters,
sorter,
extra: { currentDataSource: [], action: paginate | sort | filter }
)
So you need to change the callback to:
const onChangeTable = (pagination, filters, sorter) => {
console.log(sorter)
}

Material-UI data grid renders only 101 rows

i have a data grid which gets it's data from an api response then rendering it to server-side rendering and i basically do this SQL query from the database:
select * from orders
this simply selects every row in the orders table which is 350 rows
and in the api response i can see all the 350 rows that got retrieved from the database.
but when i render them in a Material-UI data grid i just get first 101 rows exactly 101.
i searched everywhere and couldn't see if there is a row limit so why is it exactly rendering only 101 rows?
i don't know if it will help but here is my code (i believe i didn't set a row limit if there is one....):
DataTable.js:
import { DataGrid, GridColDef, GridRowsProp } from "#material-ui/data-grid";
import React, { Fragment } from "react";
import { renderSelectEditCell } from "./select-field";
export default function DataTable({ rows0 }) {
const columns: GridColDef[] = [
{
editable: false,
sortable: false,
field: "username",
headerName: "username",
width: 150,
},
{
editable: true,
sortable: false,
field: "order_title",
headerName: "order_title",
width: 150,
},
{
editable: true,
sortable: false,
field: "order_price",
headerName: "order_price",
width: 150,
},
{
editable: true,
sortable: false,
field: "date",
headerName: "date",
width: 150,
},
{
editable: true,
sortable: false,
field: "order_status",
headerName: "order_status",
width: 150,
renderCell: renderSelectEditCell,
renderEditCell: renderSelectEditCell,
},
];
return (
<Fragment>
<div style={{ width: imgwidth }}>
<DataGrid
hideFooter
disableSelectionOnClick
disableDensitySelector
disableColumnSelector
disableColumnMenu
autoHeight
rows={rows0}
columns={columns}
/>
</div>
</Fragment>
);
}
Data0.js where i use DataTable:
import { getSession } from "next-auth/client";
import DataTable from "../../components/DataTable";
export default function Data0({ rows0 }) {
return (
<Fragment>
<DataTable rows0={rows0} />
</Fragment>
);
}
export async function getServerSideProps(context) {
const session = await getSession(context);
if (session) {
const res = await fetch(
`${process.env.WEBSITE_URL}/api/orders?user=${session.user.user_id}&test=ff`
);
const rows = await res.json();
return {
props: {
rows0: rows,
},
};
} else {
return {
props: {},
};
}
}

I think you'll find that if you remove the hideFooter prop, you'll see that there is pagination occurring -- you are just hiding the part that allows you to navigate through the pages.
From https://material-ui.com/components/data-grid/pagination/#paginate-gt-100-rows:
The DataGrid component can display up to 100 rows per page. The XGrid component removes this limitation.
DataGrid has a default page size of 100 and that is also the max page size allowed (unless you pay for the enterprise XGrid component).

`react-table` v7 how to preserve a grouping's sort order whilst the rows of the groups are sorted

I have a table that is grouped with an initial sort order applied.
I want to be able to sort on the UI but at the same time preserve the initial grouping sort order.
So it would be like a multi-sort but that one sorting rule is always applied to the group.
This is the initial sorting rule:
const initialSortBy: Array<RisksIdentifiedSortBy> = [
{
id: DataAccessors.RISK_SCORE,
desc: true,
},
{
id: DataAccessors.GROUP,
desc: false,
},
];
RISK_SCORE column would be sortable:
{
Header: (): JSX.Element => {
return (
<Box sx={{ margin: 'auto' }}>
{t('policy-management/summary:TABLE.HDR.RISK_SCORE')}
</Box>
);
},
accessor: DataAccessors.RISK_SCORE,
sortType: 'alphanumeric',
Cell: ({
value,
row,
}: DataTableCell<RiskLevel>): JSX.Element | null => {
return !row.canExpand ? (
...
) : null;
},
},
And we would force RISK_GROUP to be sorted the same every time without being sortable itself from user interaction:
{
Header: t('policy-management/summary:TABLE.HDR.RISK_GROUP'),
accessor: DataAccessors.GROUP,
Cell: ({ value }: DataTableCell<string>): string => value,
SubCell: ({ row }: Pick<DataTableCell<any>, 'row'>): JSX.Element => {
const {
original: { riskCategory },
} = row;
return <Box sx={{ ml: '1.5rem' }}>{riskCategory}</Box>;
},
width: '20%',
disableSortBy: true,
},
Any ideas how to do this?
I think it would be similar to programmatically setting the sort option in one column when another is sorted?

useTable({ columns, data, autoResetSortBy: false }, useSortBy))

I managed to do this by passing a controlled state into my table as suggested here:
https://react-table.tanstack.com/docs/faq#how-can-i-manually-control-the-table-state

i was stuck with this for a while, turns out there is a property on table instance
const tableInstance = useTable<any>(
{ columns, data: memoData, autoResetExpanded: false, autoResetSortBy: false }, ...)
docs:
autoResetSortBy: Boolean
Defaults to true When true, the sortBy state
will automatically reset if any of the following conditions are met:
data is changed To disable, set to false For more information see the
FAQ "How do I stop my table state from automatically resetting when my
data changes?"
https://react-table.tanstack.com/docs/api/useSortBy

React-data-table -Adding a CSS class to row dynamically

I am using an datatable of react-data-table-component, my table is generated from the API response data. I want to dynamically add a class to each of the rows generated based on the condition. How can I acheive this ?
https://www.npmjs.com/package/react-data-table-component
I am using the above datatable.
let columns= [
{
name: "ID",
selector: "ID",
sortable: true,
cell: row => <div>{row.ID}</div>
}];
<Datatable
columns={columns}
data={this.state.mydata} />
I want to add a custom CSS class to the entire row of this data table based on a condition.

I think you might be looking for the getTrProps callback in the table props:
getTrProps={ rowInfo => rowInfo.row.status ? 'green' : 'red' }
It's a callback to dynamically add classes or change style of a row element
Should work like this if I remember correctly:
getTrProps = (state, rowInfo, instance) => {
if (rowInfo) {
return {
className: (rowInfo.row.status == 'D') ? "status-refused" : "", // no effect
style: {
background: rowInfo.row.age > 20 ? 'red' : 'green'
}
}
}
return {};
}
render() {
<Datatable
columns={columns}
data={this.state.mydata}
getTrProps={this.getTrProps}
/>
}

example:
...
const conditionalRowStyles = [
{
when: row => row.calories < 300,
style: {
backgroundColor: 'green',
color: 'white',
'&:hover': {
cursor: 'pointer',
},
},
},
];
const MyTable = () => (
<DataTable
title="Desserts"
columns={columns}
data={data}
conditionalRowStyles={conditionalRowStyles}
/>
);
more info check here :) https://www.npmjs.com/package/react-data-table-component#conditional-row-styling