I'm working with Ant design table component : https://ant.design/components/table/#components-table-demo-row-selection.
I'm trying to implement the accessibility features in my table component, but the table component doesn't have the configuration for accessibility. Also the table caption tag is missing from the component which is required for screen readers.
Also for adding the aria attributes to the checkboxes/radio for row selection, I have to use getCheckboxProps property of rowSelection prop.
<Table
rowSelection={{
type: "checkbox",
getCheckboxProps: (record) => ({
"aria-label": "row selection"
})
}}
columns={columns}
dataSource={data}
/>
But this method does not add the aria attribute to the checkbox in header for selection all rows.
codesandbox link for above example : https://codesandbox.io/s/selection-antd41610-forked-qpfow?file=/index.js
any way to make this table component accessible friendly?
I don't know the exact solution to solve that problem. However, In github
Somebody asked the same question as you and they discussed a lot. I will leave link below you can check it too.
I am using antd and bootstrap together. I haven't tried yet but I think you can implement accessibility of bootstrap to antd table. I know that sounds silly but maybe this will work you can't know if you don't try. I am a beginner react coder btw so I just tried to help as much as I can. I hope this link will help. Greetings
https://github.com/ant-design/ant-design/issues/22343
Related
I'm using MUIv4 and built the following table component which show some actions on hover.
UI Before Hover
UI After Hover
Now I want to shift to MUI v5 Datagrid to replace this component. But could not find anything that could fulfill my design need i.e show actions on hover. Is there any way to do this on Datagrid component?
Link of MUI5 DataGrid with somehow desire result
Note: I want to show the action on one row at a time like in gmail
Just give me the code: https://codesandbox.io/s/datagridprodemo-material-demo-forked-63c9j?file=/demo.js:699-864
You can use renderCell with Chip like this:
renderCell: (params) => {
return (
<Chip variant="outlined" size="small" label={params.value} />
);
}
As you are requiring some GMail like interface try setting the icon property of Chip. Reference: https://github.com/mui-org/material-ui/blob/v5.3.0/docs/src/pages/components/chips/IconChips.js
And it looks something like this:
You could check this documentation about migration from v4 to v5 https://mui.com/components/data-grid/migration-v4/#removed-props.
There are some removed props related to hover event: onCellEnter, onCellLeave, onRowEnter, and onRowLeave. The developer said that they removed the props for better performance https://github.com/mui-org/material-ui-x/issues/3799.
You could also check this documentation https://mui.com/components/data-grid/components/#row for the implementation examples when the mouse cursor enters or leaves the row or this documentation https://mui.com/components/data-grid/components/#cell when the mouse cursor enters or leaves the cell.
I use material-ui for my project. And for data tables I use material-table. material-ui basic table has prop "stickyHeader" which fixes the table header while scrolling table body. I need the same thing for material-table but I can not find anything like it.
I tried to do it with custom css but my table becomes dependant on the layout. Is there any simple solution to have fixed footer and header for my material-table ?
You can use options.maxBodyHeight to make material-table sticky header. But there is no solution for fixed footer for now.
options={{
maxBodyHeight: 200
}}
I don't know how to remove tooltip from a pagination element. I'm using antd's table. This table contains a pagination. It's a part of the table. I'm trying to customize it using styled-components library. I've tried to find all classes which is containing tooltip in their titles and set them:
display: none !important;
But there was no result. There should be some class that is used for this purpose which I have no idea.
I will be grateful if someone knows the solution for this issue.
The tooltip comes from the title attribute of <li/> elements.
Such behavior is by design, therefore you can't remove it.
Alternative solutions which aren't recommended:
Implement Pagination by yourself, style it using the antd-css classes and integrate it with your custom Table.
Dynamically remove all title attributes by querying the dom.
Add showTitle=false in pagination, just put this...
pagination={{...pagination, <b>showTitle: false</b>}}
OR
pagination={<b>showTitle: false</b>}
It will disable tooltip in pagination.
My code Image:
And site API image:
I am using Ant Design with React. Ant Design has a menu component: https://ant.design/components/menu/
Is it possible to make the menu uncollapsable/unfoldable? I read the documentation, and there was no parameter to turn off folding/collapsing.
I know I'm coming late to the party but for other people struggling with this - there is an undocumented (as far as I could tell from official docs) prop of Menu component called disabledOverflow. Setting it to true solved it for me.
Kudos to VS Code editor, it suggested this property to me and saved my day!
I made it work by including a min-width style object to the Menu
<Menu
theme="dark"
mode="horizontal"
style={{minWidth: '800px'}}
>
...
</Menu>
Antd Inline Menu This gives you a menu that does not collapse.
Moreover it is only collapsible when you give the
inlineCollapsed={this.state.collapsed}
props to Menu Component
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle