Add extra column support

CONTRIBUTING.md

@@ -0,0 +1,72 @@
+# Contributing to @scharinger/gantt-task-react
+
+Thank you for your interest in contributing! This guide will help you set up the development environment.
+
+## Development Setup
+
+### Prerequisites
+- Node.js (v14 or higher)
+- npm
+
+### Getting Started
+
+```bash
+# Clone the repository
+git clone https://github.com/yourusername/gantt-task-react.git
+cd gantt-task-react
+
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Run tests
+npm test
+```
+
+### Running the Example
+
+To test your changes with the example application:
+
+```bash
+cd example
+npm install
+npm start
+```
+
+The example will be available at `http://localhost:3000`.
+
+## Development Workflow
+
+1. **Make your changes** in the `src/` directory
+2. **Build the library** with `npm run build`
+3. **Test your changes** using the example application
+4. **Run tests** with `npm test`
+5. **Update documentation** if needed
+
+## Code Guidelines
+
+- Follow TypeScript best practices
+- Maintain existing code style
+- Add JSDoc comments for public APIs
+- Include tests for new features
+- Update documentation for new features
+
+## Submitting Changes
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/your-feature-name`
+3. Make your changes
+4. Test your changes
+5. Commit with descriptive messages
+6. Push to your fork
+7. Create a Pull Request
+
+## Publishing
+
+For maintainers: See [PUBLISHING.md](PUBLISHING.md) for instructions on publishing new versions.
+
+## Questions?
+
+If you have questions about contributing, please open an issue on GitHub.

PUBLISHING.md

@@ -0,0 +1,146 @@
+# Publishing Guide for @scharinger/gantt-task-react
+
+This guide covers the process of publishing new versions of the package to npm.
+
+## Version Strategy
+
+We follow [Semantic Versioning](https://semver.org/):
+
+- **Patch (0.4.X)**: Bug fixes and small improvements
+- **Minor (0.X.0)**: New features, backwards compatible  
+- **Major (X.0.0)**: Breaking changes
+- **Beta (X.Y.Z-beta.N)**: Pre-release versions for testing
+
+## Prerequisites
+
+1. **npm account**: Make sure you're logged in to npm
+   ```bash
+   npm whoami  # Check if logged in
+   npm login   # Login if needed
+   ```
+
+2. **Repository access**: You should have write access to the repository
+
+3. **Clean working directory**: Commit all changes before publishing
+
+## Publishing Steps
+
+### 1. Update Version
+
+Update the version in `package.json`:
+
+```json
+{
+  "version": "0.4.1-beta.0"  // For beta releases
+  // or
+  "version": "0.4.1"         // For stable releases
+}
+```
+
+### 2. Update Documentation
+
+- Update `README.md` if there are new features or API changes
+- Update `CHANGELOG.md` (if it exists) with the changes
+
+### 3. Build and Test
+
+```bash
+# Build the library
+npm run build
+
+# Run tests
+npm test
+
+# Test with example project
+cd example
+npm install
+npm start
+```
+
+### 4. Publish to NPM
+
+**For beta releases:**
+```bash
+npm publish --tag beta --access public
+```
+
+**For stable releases:**
+```bash
+npm publish --access public
+```
+
+### 5. Create Git Tag (Recommended)
+
+```bash
+git tag v0.4.1-beta.0
+git push origin v0.4.1-beta.0
+```
+
+### 6. Update GitHub Release (Optional)
+
+Create a release on GitHub with:
+- Tag version
+- Release notes describing changes
+- Any breaking changes or migration notes
+
+## Post-Publishing
+
+### Verify Publication
+
+Check that the package is available:
+
+```bash
+npm view @scharinger/gantt-task-react versions --json
+```
+
+### Test Installation
+
+Test in a fresh project:
+
+```bash
+mkdir test-install
+cd test-install
+npm init -y
+npm install @scharinger/gantt-task-react@beta  # or @latest
+```
+
+## Installation Commands for Users
+
+After publishing, users can install with:
+
+```bash
+# Latest stable version
+npm install @scharinger/gantt-task-react
+
+# Beta version
+npm install @scharinger/gantt-task-react@beta
+
+# Specific version
+npm install @scharinger/[email protected]
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **402 Payment Required**: Use `--access public` for scoped packages
+2. **403 Forbidden**: Check npm login and package permissions
+3. **Version already exists**: Increment version number
+
+### Rollback
+
+If you need to unpublish (only for packages published less than 72 hours ago):
+
+```bash
+npm unpublish @scharinger/[email protected]
+```
+
+**Note**: Unpublishing is discouraged and may not be possible for stable releases.
+
+## Automation (Future)
+
+Consider setting up GitHub Actions for automated publishing:
+
+- Automated testing on PR
+- Automated beta releases on merge to develop
+- Automated stable releases on merge to main

README.md

@@ -15,7 +15,7 @@ npm install gantt-task-react
 ## How to use it
 
 ```javascript
-import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
+import { Gantt, Task, ExtraColumn, DateFormat, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
 import "gantt-task-react/dist/index.css";
 
 let tasks: Task[] = [
@@ -40,6 +40,7 @@ You may handle actions
 <Gantt
   tasks={tasks}
   viewMode={view}
+  dateFormat="iso8601"
   onDateChange={onTaskChange}
   onTaskDelete={onTaskDelete}
   onProgressChange={onProgressChange}
@@ -144,6 +145,112 @@ npm start
 
 \*Required
 
+## Extra Columns Support
+
+You can add custom columns to the task list by using the `extraColumns` prop:
+
+```javascript
+import { Gantt, Task, ExtraColumn } from 'gantt-task-react';
+
+// Define extra columns
+const extraColumns: ExtraColumn[] = [
+  {
+    key: "status",
+    title: "Status",
+    width: "100px",
+  },
+  {
+    key: "assignee", 
+    title: "Assignee",
+    width: "120px",
+  },
+  {
+    key: "priority",
+    title: "Priority", 
+    width: "80px",
+    render: (task) => (
+      <span className={`priority-${task.extraColumns?.priority}`}>
+        {task.extraColumns?.priority}
+      </span>
+    ),
+  },
+];
+
+// Add extra data to your tasks
+const tasks: Task[] = [
+  {
+    id: "1",
+    name: "Task 1",
+    start: new Date(),
+    end: new Date(),
+    progress: 50,
+    type: "task",
+    extraColumns: {
+      status: "In Progress",
+      assignee: "John Doe", 
+      priority: "High",
+    },
+  },
+];
+
+<Gantt 
+  tasks={tasks} 
+  extraColumns={extraColumns}
+  nameColumnWidth="200px"
+  fromColumnWidth="130px"
+  toColumnWidth="130px"
+  dateFormat="iso8601"
+/>
+```
+
+### ExtraColumn Interface
+
+| Parameter Name | Type                                    | Description                                                              |
+| :------------- | :-------------------------------------- | :----------------------------------------------------------------------- |
+| key\*          | string                                  | Unique key for the column, used to access data in task.extraColumns     |
+| title\*        | string                                  | Column header title                                                      |
+| width          | string                                  | Column width (e.g., "100px", "120px"). Defaults to listCellWidth        |
+| render         | `(task: Task) => React.ReactNode`       | Optional custom render function for complex column content               |
+
+### Column Width Configuration
+
+You can customize the width of the default columns:
+
+| Parameter Name    | Type   | Description                                      |
+| :---------------- | :----- | :----------------------------------------------- |
+| nameColumnWidth   | string | Width of the Name column (e.g., "200px")        |
+| fromColumnWidth   | string | Width of the From/Start date column (e.g., "130px") |
+| toColumnWidth     | string | Width of the To/End date column (e.g., "130px")     |
+
+### Date Format Configuration
+
+You can choose how dates are displayed in the From and To columns:
+
+```javascript
+import { Gantt, DateFormat } from 'gantt-task-react';
+
+<Gantt 
+  tasks={tasks}
+  dateFormat="iso8601"  // Options: "locale" or "iso8601"
+/>
+```
+
+| Parameter Name | Type       | Description                                                          |
+| :------------- | :--------- | :------------------------------------------------------------------- |
+| dateFormat     | DateFormat | Date display format. "locale" uses locale formatting (e.g., "Fri, June 15, 2025"), "iso8601" uses ISO 8601 format (YYYY-MM-DD) |
+
+**DateFormat Options:**
+- `"locale"` (default): Displays dates in locale-specific format (e.g., "Fri, June 15, 2025")
+- `"iso8601"`: Displays dates in ISO 8601 format (e.g., "2025-06-15")
+
+\*Required
+
+## Contributing
+
+For development setup and contributing guidelines, see [CONTRIBUTING.md](CONTRIBUTING.md).
+
+For maintainers: Publishing instructions are in [PUBLISHING.md](PUBLISHING.md).
+
 ## License
 
 [MIT](https://oss.ninja/mit/jaredpalmer/)

example/src/App.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Task, ViewMode, Gantt } from "gantt-task-react";
 import { ViewSwitcher } from "./components/view-switcher";
 import { getStartEndDateForProject, initTasks } from "./helper";
+import ExtraColumnsApp from "./ExtraColumnsApp";
 import "gantt-task-react/dist/index.css";
 
 // Init
@@ -103,6 +104,7 @@ const App = () => {
         ganttHeight={300}
         columnWidth={columnWidth}
       />
+      <ExtraColumnsApp />
     </div>
   );
 };