react-dinamic-tables v0.0.2
Table Component
The Table Component is a React component that allows you to display data in a table format. It provides features for selecting and editing cells within the table. This component is designed to make it easy to display and interact with tabular data in your web applications.
Installation
To use the Table Component in your React project, you can install it via npm or yarn:
npm install table-component
# or
yarn add table-component
Usage
To use the Table Component in your React application, you can import it and include it in your component hierarchy. Here's an example of how to use it:
import React from "react";
import TableComponent from "table-component";
function App() {
const headers = [
{ attributeName: "name", displayText: "Name" },
{ attributeName: "description", displayText: "Description" },
{ attributeName: "amount", displayText: "Amount" },
];
const data = [
{
id: "1",
name: "Item 1",
description: "Description of Item 1",
amount: 10.99,
},
// ... Add more data
];
return (
<div>
<h1>Table Example</h1>
<TableComponent headers={headers} rows={data} />
</div>
);
}
export default App;
Features
- Display tabular data with customizable headers.
- Allow selection of cells within the table.
- Edit cell content by typing.
- Handles keyboard navigation within the table.
New Features
- Empty Table Message: You can now display a custom message when the table is empty. We will use the
EmptyTableMessage
story to demonstrate it:
import React from "react";
import TableComponent from "table-component";
function App() {
const headers = [
{ attributeName: "name", displayText: "Name" },
{ attributeName: "description", displayText: "Description" },
{ attributeName: "amount", displayText: "Amount" },
];
const data = []; // Empty table
return (
<div>
<h1>Empty Table Message Example</h1>
<TableComponent headers={headers} rows={data} />
</div>
);
}
export default App;
In this example, the table is empty, and no custom message is displayed. Use the EmptyTableMessage
story to see how a message is shown when the table is empty.
- Custom Empty Table Message: You can customize the message displayed when there are no rows in the table. We will use the
CustomEmptyTableMessage
story to demonstrate it:
import React from "react";
import TableComponent from "table-component";
function App() {
const headers = [
{ attributeName: "name", displayText: "Name" },
{ attributeName: "description", displayText: "Description" },
{ attributeName: "amount", displayText: "Amount" },
];
const data = []; // Empty table
// Customize the empty table message
const options = {
noRowsText: "Hey, check your data, there are no rows.",
};
return (
<div>
<h1>Custom Empty Table Message Example</h1>
<TableComponent headers={headers} rows={data} options={options} />
</div>
);
}
export default App;
In this example, we have defined a custom message in the noRowsText
option. When the table is empty, the custom message is displayed.
- No Headers: You can display a table without headers by providing an empty array for the
headers
prop. Here's an example:
import React from "react";
import TableComponent from "table-component";
function App() {
const headers = []; // Empty array, no headers
const data = [
{
id: "1",
name: "Item 1",
description: "Description of Item 1",
amount: 10.99,
},
// ... Add more data
];
return (
<div>
<h1>No Headers Example</h1>
<TableComponent headers={headers} rows={data} />
</div>
);
}
export default App;
In this example, we provided an empty array for headers
, resulting in a table without headers.
- Headers Auto-Fill: You can automatically generate headers based on the data in your table by setting the
HeadersAutoFill
option totrue
. Here's an example:
import React from "react";
import TableComponent from "table-component";
function App() {
const headers = []; // Empty array
const data = [
{
id: "1",
name: "Item 1",
description: "Description of Item 1",
amount: 10.99,
},
// ... Add more data
];
// Enable automatic header generation
const options = {
HeadersAutoFill: true,
};
return (
<div>
<h1>Headers Auto-Fill Example</h1>
<TableComponent headers={headers} rows={data} options={options} />
</div>
);
}
export default App;
In this example, we have enabled automatic header generation with the HeadersAutoFill
option. Headers are automatically generated based on the data in the table.
API
TableComponent
headers
: An array of header objects that define the column headers of the table.rows
: An array of data objects, each representing a row in the table.
getCell
A utility function that can be used to retrieve a specific cell within the table.
import { getCell } from "table-component";
const tableRef = React.createRef();
const cell = getCell(tableRef, "rowId", "columnId");