score:26
there is a property of table, locale
. this is an object
, used to define
following things:
filterconfirm
, filterreset
, emptytext
.
use emptytext
to specify the text
that you want to show if data
is empty
. like this:
let locale = {
emptytext: 'abc',
};
<table locale={locale} datasource={datasource} columns={columns} />
check the doc: https://ant.design/components/table/
score:1
it is well explained on ant design site. here is the link https://ant.design/components/empty/
score:3
locale can be used. empty text can be given directly.
<table locale={{emptytext:"no data"} datasource={datasource} columns={columns} />
score:14
you can use locale
props of antd table which is object
.
instead of just passing string
to emptytext
you can pass html
tag.
let locale = {
emptytext: (
<span>
<p>
<icon type="like" />
custom message
</p>
<button>custom button</button>
</span>
)
};
<table locale={locale} datasource={datasource} columns={columns} />
score:19
there is another way to do this, without touching the locale
property:
wrap the <table />
with a <configprovider />
and set the renderempty
property:
<configprovider renderempty={() => <empty description="custom message"/>}>
<table />
</configprovider>
the renderempty
function can return any component you want.
more details here: https://ant.design/components/config-provider/#api example from docs: https://ant.design/components/empty/#components-empty-demo-config-provider
Source: stackoverflow.com
Related Query
- Antd UI library. Overriding <Table /> behavior on empty data
- How to push dynamic columns and row data to antd table
- React-Table Filtering unexpected behavior : The table header is updated (and the filter itself) instead of updating just the data
- Is there any way we can export the Antd table data into an excel sheet on button click with reactjs
- Select the table rows by default based on the data in antd table
- Customize React Antd table header with table data
- Insert Icon on AntD Column Table based on Data Device
- How to have main expandable row for data with children in antd table
- How to add from ... to ... meta data to antd table pagination
- I am using reactJS, AntD Table for framework, but I can't make the data shown in the table
- How to mockup data of table using react testing library in react 17?
- converting antd table data into hooks
- How can sort Antd table data by length, when the data contain a null value
- How to get AntD Table to display nested dataSource data
- How to display nested json data using antd table in react
- how to get a specific data from antd table
- ReactJS Antd Table Rendering Old Data
- React table library that supports mutable data ( useRef )
- how can i fetch the data from antd table expanded each time when i click on expandable button
- How to pass data from AntD table to another component in React?
- React Antd table rendering before data is populated
- React testing library - check the existence of empty div
- how to sort a table in alphabetical order with antd
- React-router: Using <Link> as clickable data table row
- How to submit form component in modal dialogue using antd react component library
- How to filter on ANTD table when the column is a JSON array instead of a string
- antd - ant design table with pagination control supporting a widget to choose rows per page?
- CSS for colouring one row of antd table in react
- How can I set default sorter and filters on antd table components?
- How can i create a table using the react-pdf library for generation pdf report?
More Query from same tag
- How to style a reactjs table inside APP.js file
- How to remove trailing slashes in gatsby project?
- The media could not be loaded error when trying to play a video in videojs
- React JSON object unpacking correctly and show it on UI
- How do I extract messages from multiple specific folders with FormatJS CLI?
- How to get a smooth transition with a looping carousel in react
- useEffect called twice after passing multiple arguments
- CDataTable (Core UI React) prop onPageChange trigger 2 times
- cannot set state on component that has not mounted bug
- How to write redux-persist in redux toolkit along with TypeScript
- How to delete from Firebase with React?
- gh-pages displaying a blank page instead of project page
- Reactjs: How to import an image from a variable path
- React : unique id or classname of array based on index of embla carousel react in styled components
- How to apply ag-grid custom filter when clicking a button
- Can't render Svg Component in React
- useEffect won't update state
- How to do correctly multiple calls to firebase
- How can I center my clip-path's text relatively to the viewport and display all the clip-path's text?
- (Reactjs) "delay" when fetching data using useEffect and useState
- How to execute onclick before navigating to a different page?
- How do I add HubSpot chat to react js app?
- Webpack ReferenceError: require is not defined (ReactJS)
- Express/mssql login form throws "ReferenceError:"" is not defined"
- React component is unable to fetch data from api
- error network while installing create-react-app
- React-table add total as first row
- Trying to render multiple reacts to multiple divs rather than an ID
- javascript Date(), render from array of weekdays, index chosen by Date().getDay(), reactjs
- How can I memoize a variable derived from redux useSelector?