9/5/2023 0 Comments Tailwind table![]() ] Rows Per Page This is a number type that indicates how many rows per page should be displayed. * The Example rows above can have its column data looking thus.įield: "front_end_name", Indicates if this field can be exported on the CSV (optional) defaults to true. Indicates If this property should be used displayed in the table header (optional). Indicates that of this column should be used to search (optional). This will be used to display in the table heading. Used to get string data from the each row objectįield: string, //This field can have a full stop(.) will allow us to read further into nested objects The interface defining the table is below. This can have a dot(.) accessor description to read nested row objects. field: This property is a string used to read data from each row object, It determines what will be diplayed for each table column.use: This is the name to be used as the table head display name.The Icolumn interface contains two important properties which are ] ColumnsThe "columns" props is an array of objects that determines the details of the table headers and also determines which data from the rows prop is shown in the table. A nested object can be read and displayed as far as the column field description has a dot(.) accessor. The expected data types is an array of objects, each object having string keys. This must be an array and is enforced using reacts prop-types "" props checker. } RowsThe rows prop determine the number of table rows available in the tag. This will be discussed properly in the course of the documentation On_bulk_action?: (selected_option: string, selected: Irow) => void, On_search?: (search_word: string, result?: Irow | ) => void,Įxport_modify?: (row: Irow, col: Icolumn, display_value: string) => string, ![]() Row_render?: (row: Irow, col: Icolumn, display_value: string) => string, The interface defining the expected props is below. There are about 2 compulsory props and 6 non-compulsory prop. } Table PropsThe data from the props determines what will be displayed. Import 'react-tailwind-table/dist/index.css' Import Table from 'react-tailwind-table' Import Table from 'react-tailwind-table' and import 'react-tailwind-table/dist/index.css' This can easily be achieved with two lines of code. Tailwind ProjectA tailwind project would just need to import the react component using import Table from 'react-tailwind-table' None Tailwind ProjectNone tailwind users can import this component in any react project of choice, no matter if they are using a css library or not. ![]() All css classes used in designing and customizing the table component are all custom tailwind classes which ensures that an existing tailwind project would not need to include this css file again. Install npm install -save react-tailwind-table UsageThis component also exports a tiny css file built by tailwind. (#table-with-and-without-borders) - Customization and Custom Styling Debounced Search, - (#on-search-callback) - No Content Message, (#table-header) - Row Render (render function) The core of the component is written in Typescript: Which brings alive the usage of Typings in this documentation.Ī few features that comes with this table include ![]() Comes with pagination, search, CSV export multi select and tons of other features. Perfectly works with any react application with or without Tailwind CSS. React-tailwind-table A Responsive Table component Made with React Js and provides firstclass Tailwind CSS support. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |